I am attempting to apply CSS styles to a Material-UI component.
defined in MyCss.css
.trackTitle {
color:white;
}
located in myComponent.js
import "./MyCss.css"
<Grid container item xs={1} className="trackTitle">
change color test
</Grid>
The color change is not taking effect.
However, the following approach works:
import "./MyCss.css"
<Grid container item xs={1} className="trackTitle">
<span className="trackTitle">
change color test
</span>
</Grid>
If I use a basic span tag instead of the Material-ui Grid
The style applies correctly.
Consider another example with the Slider component
defined in MyCss.css
.mySlider {
height:"80px";
}
in myComponent.js
<Slider className="mySlider"
min={0} max={1} step={0.1}/>
does not work as expected.
<Slider className="mySlider" style={{height:"80px"}}
min={0} max={1} step={0.1}/>
This method does work for applying the desired styles.
I have realized that using className for a Material-UI component does not work as intended.
However, I still want to apply CSS styles to Material-UI components. How can this be achieved?