How do I modify the default style of material-ui?
use the official demo directly: https://material-ui.com/demos.
see that the root element in it has a fixed height of 440px and want to change it to 100%, but this test-root-2 is returned by classes.root after using withStyles , not dead. It doesn"t feel good if I directly set the style of test-root-2 . Is there any way to set it?
in addition, is there any introduction to the methods in @ material-ui/core/styles ? Official documents cannot be found. There should be many ways to find them
.
well, I see. Just modify the height of withStyles the first parameter styles.root . It turns out that you don't have to care about the specific value of classes.root at all.
The function of
withStyles converts a js object in the form of css-in-js into a real css, such as:
const styles = (theme) => ({
testhaha: { height: 140 },
root: { height: 840 },
})
after being converted to css:
.test1-testhaha-1{
height: 140px
}
.test1-root-1{
height: 840px
}
ps. The test1 prefix here can be customized, and the custom method is followed by
.
well, after the conversion, the style class name is completely different. I'm going to write JSX. How do I know what to fill in className= "?" in JSX?
the answer is: withStyles (styles, {name:'test1'}) (Connections) , Connections is the following class object , and its constructor can receive the transformed style class name , method:
class Connections extends Component {
constructor (props) {
super(props)
console.log('classes', props.classes) //
}
render () {
const { classes } = this.props
return (
<div className={classes.root}>
<p className={classes.testhaha}>
</div>
)
}
}
above props.classes content will be:
{
testhaha: 'test1-testhaha-1',
root: 'test1-root-2',
}
I believe that if you see the printed content and the converted css-in-js , you will know the relationship between them
.
