如何在React中自定义Material UI？

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.