Material UI Styling

For the sake of simplicity, Material UI expose the styling solution used in Material-UI components as the @material-ui/styles package. You can use it, but you don't have to, since Material-UI is also interoperable with all the other major styling solutions.

n previous versions, Material-UI has used LESS, then a custom inline-style solution to write the component styles, but these approaches have proven to be limited. A CSS-in-JS solution overcomes many of those limitations, and unlocks many great features (theme nesting, dynamic styles, self-support, etc.).

Material-UI's styling solution is inspired by many other styling libraries such as styled-components and emotion.

You can expect the same advantages as styled-components.

🚀 It's blazing fast.

🧩 It's extensible via a plugin API.

⚡️ It uses JSS at its core – a high performance JavaScript to CSS compiler which works at runtime and server-side.

📦 Less than 15 KB gzipped; and no bundle size increase if used alongside Material-UI.

There are 3 possible APIs we can use to generate and apply styles, however they all share the same underlying logic.

Hook API 

=======

import React from 'react';

import { makeStyles } from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';

const useStyles = makeStyles({

  root: {

    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',

    border: 0,

    borderRadius: 3,

    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',

    color: 'white',

    height: 48,

    padding: '0 30px',

  },

});

export default function Hook() {

  const classes = useStyles();

  return <Button className={classes.root}>Hook</Button>;

}

Styled components API

=====================

Note: this only applies to the calling syntax – style definitions still use a JSS object. You can also change this behavior, with some limitations.

import React from 'react';

import { styled } from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({

  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',

  border: 0,

  borderRadius: 3,

  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',

  color: 'white',

  height: 48,

  padding: '0 30px',

});

export default function StyledComponents() {

  return <MyButton>Styled Components</MyButton>;

}

Higher-order component API

==========================

import React from 'react';

import PropTypes from 'prop-types';

import { withStyles } from '@material-ui/core/styles';

import Button from '@material-ui/core/Button';

const styles = {

  root: {

    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',

    border: 0,

    borderRadius: 3,

    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',

    color: 'white',

    height: 48,

    padding: '0 30px',

  },

};

function HigherOrderComponent(props) {

  const { classes } = props;

  return <Button className={classes.root}>Higher-order component</Button>;

}

HigherOrderComponent.propTypes = {

  classes: PropTypes.object.isRequired,

};

export default withStyles(styles)(HigherOrderComponent);

References:

https://material-ui.com/styles/basics/