colors - 覆盖 Material-UI 私有(private)样式

Question

如何覆盖 Material-UI 私有(private)样式？

我想更改 slider valueLabel 的字体颜色。
换句话说，我想要这个:

看起来像这样:

到目前为止，我已经尝试过全局覆盖样式，但它不起作用:

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

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

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

Answer 1

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

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