How to override (overwrite) classes and styles in material-ui (React)
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 (
<AppBar classes={{ root: classes.root }}>
// Add other code here
</AppBar>
)
}
Solution 2
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
Solution 3
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
}
}
});
Related videos on Youtube
cssyphus
Props to CertainPerformance for his StackOverflow TamperMonkey scripts. Muchos gracias, compadre! Anyone not already familiar with TamperMonkey: this is a Must-Have browser extension. Quick intro: see this and this. Some useful TamperMonkey repos: LegacyProfiles by Spectric Some site-specific userscripts A couple of not-to-miss personal favs: Rob Latour's Apps - SetVol is particularly useful Nenad Hrg's Apps When reading posts/answers, I am not asking you to upvote. But if you do, please do not upvote more than 2 on the same day (otherwise, your upvotes will be removed by the StackOverflow anti-cheating system, which I whole-heartedly support). Sharing the information is the important thing. How to use the <svg> viewBox attribute? When is localStorage cleared? css calc invalid property value Change highlight text color in Visual Studio Code
Updated on July 09, 2022Comments
-
cssyphus almost 2 years
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...
-
Sandeep Chikhale over 5 yearsThis answer is incomplete and not able to solve the problem. I have include complete answer below
-
Erik Rybalkin about 4 yearsWe can now use useStyles hook instead: material-ui.com/ru/styles/basics