How to override (overwrite) classes and styles in material-ui (React)

Question

I\'m using version 1.2.1 of material-ui and I\'m trying to override the AppBar component to be transparent. The documentation outlines how to override styles here.

My

Answer 1

This answer makes @Nadun answer complete - he deserves the credit. To override material ui classes we need to understand these things:

1. Add your styles in a const variable at the top

    const styles = {
      root: {
        backgroundColor: 'transparent !important',
        boxShadow: 'none',
        paddingTop: '25px',
        color: '#FFFFFF'
      }
    };

2. We need to use higher order function with "withStyles" to override material ui classes

    export default withStyles(styles)(NavigationBar);

3. Now these styles are available to us as props in the render function try doing this - console.log(this.props.classes) - you get a classes name correspoding to properties you include in styles object, like - {root: "Instructions-root-101"}.

Add that with classes attribute

render() {
   const { classes } = this.props;
   return ( 
       
        // Add other code here
       
   )
}