Use className for Material-UI component

by

I want tp use css to Material-UI component.

in MyCss.css

.trackTitle {
    color:white;
}

in myComponent.js

import "./MyCss.css"

<Grid container item xs={1} className="trackTitle">
change color test
</Grid>

It doesn’t change the color.

However the below works.

import "./MyCss.css"

<Grid container item xs={1} className="trackTitle">
<span className="trackTitle">
change color test
</span>
</Grid>

If I use basic tag span not Material-ui Grid

The class works.

See another case for component Slider

in MyCss.css

.mySlider {
    height:"80px";
}

in myComponent.js

<Slider className="mySlider"
    min={0} max={1} step={0.1}/>

not work.

<Slider className="mySlider" style={{height:"80px"}}
    min={0} max={1} step={0.1}/>

works.

Now I understood className for component doesn’t work.

Howeber, I want to use css to Material-UI component, how can I make it?

67 thoughts on “Use className for Material-UI component”