How To Override (overwrite) Classes And Styles In Material-ui (react)

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 Re

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

Solution 2:

importReact, { Component } from'react';
importAppBarfrom'@material-ui/core/AppBar';
importToolbarfrom'@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'
  }
};

classNavigationBarextendsComponent {
  render() {
    return (
      <AppBarclassName={classes.transparentBar}><Toolbar><imgsrc={logo}style={{height: '28px' }} /></Toolbar></AppBar>
    );
  }
}

exportdefaultwithStyles(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

Solution 3:

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

<TextFieldclassName={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
        }
    }
});