Use className for Material-UI component

Question

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?

Answer 1

What you can do is to find the material-UI components CSS selector in the browser console, then override the css in your css file. Most likely this would work. Here is an example this is the root css for the slider

.MuiSlider-root {
color: #1976d2;
width: 100%;
cursor: pointer;
height: 2px;
display: inline-block;
padding: 13px 0;
/* position: relative; */
box-sizing: content-box;
touch-action: none;
-webkit-tap-highlight-color: transparent;
}

copy-paste it and then set your updates in the css

.MuiSlider-root {
/* update */
}

Answer 2

Material-ui is a css framework, if you want to use className for material-ui component you have to injectFirst in root. example:

ReactDOM.render(
        <StylesProvider injectFirst>
            <App/>
        </StylesProvider> 
    document.getElementById('root')
);

after this you will be able to use className anywhere on the app for any material-ui component