覆盖 Material-UI 私有样式

如何解决覆盖 Material-UI 私有样式

如何覆盖 material-ui 私有样式？

我想更改滑块 valueLabel 的字体颜色。
换句话说，我想要这个：

看起来像这样：

直到现在，我都尝试在全局范围内覆盖样式，但它不起作用：

const muiThemeOptions: MuiThemeOptions = {
  overrides:{
    MuiSlider:{
      valueLabel:{
        label:{
          color: "black"
        }
      }
    }
  }
};

显然是私有的 valueLabel 标签样式。有没有办法覆盖私有样式？

这是一个代码沙盒： https://codesandbox.io/s/so-slider-label-kpp00?file=/demo.tsx

解决方法

遗憾的是，似乎无法自定义 MUI PrivateValueLabel 组件中默认使用的 Slider 的子元素。该问题已在 their Github page (@material-ui/#20063,@material-ui/#21912,@material-ui/#20911,...) 中多次提出，维护人员建议的解决方案是创建您自己的ValueLabelComponent 带有您想要的样式，并使用 Slider ValueLabelComponent={YourComponent} ... /> 在滑块中使用它。您还可以找到关于它的更多文档here。

如果您希望该组件看起来与默认组件相似，则必须深入研究其 source code 以获取灵感，因为它不是公共组件。有一个 issue created that tracks this problem 建议将该默认组件公开作为临时解决方法，但尚未完成。

,

在 css 选择器中，文本可以被定位为 valueLabel 的孙子：

            valueLabel: {
                "& > span > span": {
                    color: "orange",fontWeight: 800
                }
            }

完整示例：

const { Slider,Typography,makeStyles } = MaterialUI

const useStyles = makeStyles((theme) => ({
    root: {
        width: 300,margin: theme.spacing(3)
    },margin: {
        height: theme.spacing(3),},valueLabel: {
        "& > span > span": {
            color: "orange",fontWeight: 800
        }
    }
}))

const marks = [
    { value: 0,label: '0°C' },{ value: 20,label: '20°C' },{ value: 37,label: '37°C' },{ value: 100,label: '100°C' },];

function valuetext(value) {
    return `${value}°C`;
}

const App = function () {
    const classes = useStyles()

    return (
        <div className={classes.root}>
            <Typography id="discrete-slider-always" gutterBottom>
                Always visible
            </Typography>
            <Slider
                classes={{ valueLabel: classes.valueLabel }}
                defaultValue={80}
                getAriaValueText={valuetext}
                aria-labelledby="discrete-slider-always"
                step={10}
                marks={marks}
                valueLabelDisplay="on"
            />
        </div>
    );
}

ReactDOM.render(<App />,document.getElementById('root'))

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@4.11.3/umd/material-ui.development.js"></script>

<div id="root"></div>