覆盖 Material-UI 私有样式

Question

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

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

看起来像这样：

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

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

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

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

Answer 1

不幸的是，似乎无法自定义 MUI Slider 组件中默认使用的 PrivateValueLabel 的子元素。该问题已在 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.

中多次提出

如果您希望该组件看起来与默认组件相似，您将不得不深入研究它的 source code to get inspired, since it is not a public component. There is an issue created that tracks this problem，其中建议将默认组件 public 作为临时解决方法，但还没有完成。

Answer 2

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

Answer 3

请注意，确定这就是 OP 正在寻找的内容（在原始问题中编码沙箱的 link 似乎已损坏），我猜它在 hacky 方面有误，但您可以强加自定义 css在滑块的 valueLabel（和滑块的其他组件）上通过全局样式 provided 在自定义样式更改后添加 !important。

我在尝试修改值标签的 css 以将其从轨道上方移动到轨道下方时发现，尽管相同的方法适用于标签样式的其他方面，例如颜色:

App.js:

import "./styles.css";
import Slider from "@mui/material/Slider";

export default function App() {
  return (
    <div>
      <Slider
        valueLabelDisplay="on"
        defaultValue={2008}
        min={1998}
        max={2017}
        step={1}
      />
    </div>
  );
}

style.css（不知何故，!important 仅对某些 css 元素（例如 .MuiSlider-valueLabelLabel，而不是其他 .MuiSlider-valueLabel:before）是必需的）：

.MuiSlider-valueLabelLabel {
  color: #000000 !important;
}

.MuiSlider-valueLabel {
  top: 55px !important;
}

.MuiSlider-valueLabel:before {
  top: -6px;
}

https://codesandbox.io/s/objective-ptolemy-xn283p

覆盖 Material-UI 私有样式

Override Material-UI private style

fonts

label

colors

slider

material-ui