How do I customize Material UI in React?

Question

I am very new at using this UI framework along with React. I was allocated to develop an application which is supposed to have more design pattern and I chose a framework that also don't rely on Jquery code. However, I am struggling to customize pre-made components. They have a override section on their website but I didn't understand it very well.

I know that there are 2 ways of customizing an element

1. You can create a const styles = theme => { styles here }. Then you invoke a higher order component called withStyles. then the css properties defined will be available on classes prop.
2. You can also use classes property to change inner components, example: <Drawer classes={x}>.

the Second one is the one I don't understand exactly how it works. For instance they have a component. But to change its background for me was very complicated, I had to change it manually on my custom .css file. I couldnt use className and even using classes property it didn't work.

Can anyone explain to me a little better how exactly the customization is done?

Answer 1

The background, and other colors you can change by updating the theme. That way you can customize primary/secondary background and text colors, as well as use that in your styles.

As for the custom styling of particular components; the idea is to use withStyles as a Higher Order Component, wrapping your components. It takes theme as the parameter and passes classes as props to wrapped component.

Example:

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

const styles = theme => ({
  someClass: {
    padding: theme.spacing.unit * 5
  },
  otherClass: {
    background: 'red'
  }
});

Once the styles are defined, you can use them in your component like so:

const MyComponent = (props) => {
  return (<Button className={props.classes.someClass}>Some Action</Button>)
}

export default withStyles(styles)(MyComponent);

The withStyles will pass the styles in the props as classes, and you can then use them. If you're using functional components, you can access them via props.classes, if you're extending Component, they will be in this.props.classes

If you wish to use multiple classes, you'll need to install classnames dependency, and import it:

import React from 'react';
import { withStyles } from '@material-ui/core/styles/withStyles';
import classNames from 'classnames';


const styles = theme => ({
  someClass: {
    padding: theme.spacing.unit * 5
  },
  otherClass: {
    background: 'red'
  }
});

const MyComponent = (props) => {
  return (<Button className={classNames(props.classes.someClass, props.classes.otherClass)}>Some Action</Button>)
}

export default withStyles(styles)(MyComponent);

The classes property can also be used to set multiple classes, but that depends on the Material-UI component styling API. For example, for Tab component

<Tab label="Hello" classes={ { root: classes.tab, selected: classes.tabSelected }} />

takes root as styles to be applied by default, and selected will be applied when tab is selected. In this case, the styles would contain:

const styles = theme => ({
  tab: {
    minWidth: 'auto',
    fontSize: '11px',
    fontWeight: 'bold'
  },
  tabSelected: {
    background: theme.palette.background.paper,
    color: theme.palette.secondary.main
  },
};

Note that these are using the Tab's CSS API, to map custom styles with predefined class names.

And, of course, the Component with Tab would need to be wrapped in withStyles(styles)(Component).

Here's a live example with customized theme, and customized buttons taking multiple classes.