如何控制Material UI Slider默认valueLabelComponent的样式

还有两种更便捷的实现方式，依托MUI原生的样式覆盖能力即可实现，不需要修改默认组件源码也不需要从零开发自定义valueLabel组件：

• 单组件局部适配：直接通过slotProps属性给当前Slider的valueLabel传入自定义样式，适合单个页面少量Slider的修改场景，示例代码：

import Slider from '@mui/material/Slider';
import { useState } from 'react';

function DemoSlider() {
  const [value, setValue] = useState(30);
  return (
    <Slider
      value={value}
      onChange={(_, newValue) => setValue(newValue)}
      valueLabelDisplay="auto"
      slotProps={{
        valueLabel: {
          sx: {
            // 自定义背景色
            backgroundColor: '#2e7d32',
            // 自定义尺寸相关样式
            fontSize: '11px',
            padding: '2px 6px',
            minWidth: '28px',
            height: '20px',
            // 调整内部文本位置
            '& .MuiSlider-valueLabelLabel': {
              padding: 0
            }
          }
        }
      }}
    />
  )
}

• 全局统一适配：如果项目内所有Slider的valueLabel都需要统一修改样式，直接在全局主题配置中覆盖对应组件的样式规则即可，一次配置全应用生效，示例代码：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const customTheme = createTheme({
  components: {
    MuiSlider: {
      styleOverrides: {
        valueLabel: {
          backgroundColor: '#2e7d32',
          fontSize: '11px',
          minWidth: '28px',
          height: '20px'
        }
      }
    }
  }
});

// 外层包裹应用根组件
function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* 你的应用内容 */}
    </ThemeProvider>
  )
}

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture