Javascript 为材质UI组件使用类名称

我希望tp使用css来

材质UI

组件

在

MyCss.css中

.trackTitle {
    color:white;
}

.mySlider {
    height:"80px";
}

在
myComponent.js中

import "./MyCss.css"

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

在myComponent.js中

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



不工作

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



工作

现在我明白了组件的类名不起作用

但是，我想使用css制作UI组件的材质，如何制作？
您可以在浏览器控制台中找到材质UI组件css选择器，然后覆盖css文件中的css。这很可能会奏效。下面是一个示例，这是滑块的根css

.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;
}

复制粘贴它，然后在css中设置更新

.MuiSlider-root {
/* update */
}

MaterialUI是一个css框架，如果您想为MaterialUI组件使用类名的话
你必须先从根开始注射。例如：

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

ReactDOM.render(
document.getElementById（'root'））
);

在此之后，您将能够在应用程序的任何位置为任何材质ui组件使用className

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