覆盖Material-UI私有样式 [英] Override Material-UI private style

问题描述

如何覆盖Material-UI私有样式?

How can I override a material-ui private style?

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

I want to change the font color of the slider valueLabel.
In othe words, I want this:

看起来像这样:

To look like this:

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

Until now, I have tried to override the style globally but it isn't working:

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

显然，valueLabel标签样式是私有的.有没有一种方法可以覆盖私人样式?

Apparently is the valueLabel label style private. Is there a way to override private styles?

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

推荐答案

不幸的是，似乎无法自定义MUI Slider 组件.该问题在其Github页面( @ material-ui/#20063 ，此处找到更多文档.

Unfortunately it seems that's not possible to customize the child elements of the PrivateValueLabel that's used by default in the MUI Slider component. The issue has been raised a couple of times in their Github page (@material-ui/#20063, @material-ui/#21912, @material-ui/#20911, ...) and the suggested solution by the maintainers is to create your own ValueLabelComponent with the styling you want and use that in your slider using Slider ValueLabelComponent={YourComponent} ... />. You can also find further documentation about it here.

如果您希望该组件看起来与默认组件相似，则必须深入研究其跟踪此问题的问题公开该默认组件作为一种临时解决方法，但尚未完成.

If you want that component to look similar to the default one, you will have to dig into its source code to get inspired, since it is not a public component. There is an issue created that tracks this problem where it's has been suggested to make that default component public as a temporary workaround, but it hasn't been done yet.

这篇关于覆盖Material-UI私有样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！