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 (
<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
}
}
});
Post a Comment for "How To Override (overwrite) Classes And Styles In Material-ui (react)"