为 Material-UI 组件使用 className答案

【问题标题】：Use className for Material-UI component为 Material-UI 组件使用 className
【发布时间】：2021-02-05 17:51:23
【问题描述】：

我希望 tp 使用 css 到 Material-UI 组件。

在MyCss.css

.trackTitle {
    color:white;
}

在myComponent.js

import "./MyCss.css"

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

它不会改变颜色。

但是下面的工作。

import "./MyCss.css"

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

如果我使用基本标签 span 而不是 Material-ui Grid

课程有效。

查看组件Slider的另一个案例

在MyCss.css

.mySlider {
    height:"80px";
}

在 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}/>

有效。

现在我了解到组件的 className 不起作用。

Howeber，我想使用 css 来制作 Material-UI 组件，请问如何制作？

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

您可以做的是在浏览器控制台中找到material-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 */
}

【讨论】：

【解决方案2】：

Material-ui 是一个 css 框架，如果你想为 material-ui 组件使用 className 你必须在根目录下注入第一。示例：

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

在此之后，您将能够在应用程序上的任何地方为任何 material-ui 组件使用 className

【讨论】：