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 code:

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';

class NavigationBar extends Component {
  render() {
    const styles = {
      root: {
        backgroundColor: 'transparent',
        boxShadow: 'none',
      },
    };

    return (
      <AppBar position={this.props.position} classes={{ root: styles.root }}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
  }
}

export default NavigationBar;

But this yields no results. Am I trying to override wrong? Not sure where I'm going wrong here...

score 35 · Answer 1 · edited Jun 23 '19 at 22:04

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 ( 
       <AppBar classes={{ root: classes.root }}>
        // Add other code here
       </AppBar>
   )
}

We can now use useStyles hook instead: https://material-ui.com/ru/styles/basics/ — Erik Rybalkin, May 18 '20 at 16:09

score 8 · Answer 2 · answered Jun 13 '18 at 12:50

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';
import { withStyles } from '@material-ui/core/styles';

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

class NavigationBar extends Component {
  render() {
    return (
      <AppBar className={classes.transparentBar}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
  }
}

export default withStyles(styles)(NavigationBar);

find the important part as :

backgroundColor: 'transparent !important'

refer this guide for more details: https://material-ui.com/customization/overrides/

hope this will help you

This answer is incomplete and not able to solve the problem. I have include complete answer below — Sandeep Chikhale, Sep 02 '18 at 09:32

score 1 · Answer 3 · answered Nov 16 '21 at 13:58

Adding to above answers, if you want to add style to some internal autogenerated element, you can do this using this syntax

<TextField className={classes.txtField}

then in the classes object, we can approach the label present inside TextField via this way

const useStyles = makeStyles((theme) => ({
    txtField: {
        "& label": {
             padding: 23
        }
    }
});

score 0 · Answer 4 · answered Feb 20 '22 at 12:25

import ...;
import { withStyles } from '@mui/styles';

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

function NavigationBar (props) {

    const { classes } = props;
    return (
      <AppBar className={classes.transparentBar}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
}

export default withStyles(styles)(NavigationBar);

It works for me.

note! update MUI core version

score 0 · Answer 5 · answered Mar 02 '23 at 19:39

Material UI v5 overwriting style my approach:

index.js

import React from 'react';
import { render } from 'react-dom';
import { ThemeProvider } from '@mui/material/styles';
import App from './containers/App';
import theme from './style/theme';

render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

theme.js it will globally overwrite the style. only for those components that you describe in the theme.js file

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#009BDF',
    },
    secondary: {
      main: '#14568D',
    },
    error: {
      main: '#FF0000',
    },
  },
  typography: {
    fontFamily: 'Rubik Light, Helvetica, Arial, sans-serif',
  },
  components: {
    MuiAccordion: {
      styleOverrides: {
        root: {
          marginBottom: '5px',
          borderRadius: '0.6rem',
          boxShadow: 'none',
        },
      },
    },
    MuiAccordionSummary: {
      styleOverrides: {
        root: {
          background: '#14568D',
          borderRadius: '4px',
          content: {
            margin: '0px',
          },
        },
      },
    },
    MuiAccordionDetails: {
      styleOverrides: {
        root: {
          background: '#DEF1F9',
          borderBottomLeftRadius: '4px',
          borderBottomRightRadius: '4px',
        },
      },
    },
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          backgroundColor: '#FFFFFF',
          color: '#2f343D',
          border: '1px solid',
          fontSize: '1rem',
          padding: '3px 20px',
        },
      },
    },
    MuiDialog: {
      styleOverrides: {
        paper: {
          background: '#EFF8FC',
        },
      },
    },
  },
});

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

5 Answers5

Linked