React Material UI - Tuong-Nguyen/JavaScript-Structure GitHub Wiki

Custom Theme

  • Create a theme
  • Use <MuiThemeProvider /> to wrap the components we want to customize

Create a Theme

Custom by Configuration Variables

  • Base on the options received
const theme = createMuiTheme({
  status: {
    danger: 'orange'
  }
});

Configuration Variables

overrides injected style

Override default style of Button

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      // Name of the styleSheet
      root: {
        // Name of the rule
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
        // ...
      }
    }
  }
});

Apply Theme

<MuiThemeProviver theme={theme}>
  <Component />
</MuiThemeProvider>

Change Theme to Dark

The default theme is light. We can make a theme dark by setting type to dark

const theme = createMuiTheme({
  palette: createPalette({
    type: 'dark', // Switching the dark mode on is a single property value change.
  }),
});

Customize Component with Overrides

One-time Situation

Override with className

  • Create a stylesheet
const styleSheet = createStyleSheet('OverridesClassNames', {
  buttonStyle: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
  }
});
  • Set className to this stylesheet from component's properties props.classes.buttonStyle 
function OverridesClassNames(props) {
  return (
    <Button className={props.classes.buttonStyle}>
      Button
    </Button>
  );
}
  • Wrap with Higher-order Component (HoC) withStyles 
export default withStyles(buttonStyle)(OverridesClassNames);

Override with classes

  • Create a stylesheet with classes is documented as CSS API of the component 
const styleSheet = createStyleSheet('OverridesClasses', {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
  },
  label: {
     textTransform: 'capitalize',
  },
});
  • Set classes to this stylesheet from component's properties props.classes.CSSAPI 
   <Button
      classes={{
        root: props.classes.root, // className, e.g. `OverridesClasses-root-X`
        label: props.classes.label, // className, e.g. `OverridesClasses-label-X`
      }}
    >
      Button
    </Button>
  • Wrap with Higher-order Component (HoC) withStyles 
export default withStyles(styleSheet)(OverridesClasses);

Override with inline-style

  • Create a style as set of rules
const style = {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  borderRadius: 3,
  border: 0
};
  • Set to style of component
    <Button style={style}>
      {'inline-style'}
    </Button>

Custom Component

Create a custom component that has the same theme with other material-ui components

Access The Theme in Component

  • Use Higher-order Component (HoC) withTheme() 
export default withTheme(ComponentWithTheme);
  • Get the theme as a property 
function ComponentWithTheme(props) {
  const { theme } = props;
  const primaryText = theme.palette.text.primary;
  // ...
}
⚠️ **GitHub.com Fallback** ⚠️