单页多Material UI Slider共享颜色props hover单个全量同步变色求助

多Slider实例同步变色的核心原因和组件key、实例写法无关，问题出在createMuiTheme的全局生效特性：你通过主题配置的overrides规则属于全局样式覆盖，只要页面内所有Slider匹配对应类名，就会应用最新的主题配置，所以修改单个SliderBox内部的主题变量会同步作用到所有Slider组件上，就算改用类组件也无法解决该问题。

方案1：用内联样式API替代全局主题覆盖（最推荐） #

业务需要的valueLabel自定义样式不需要通过全局主题配置实现，直接在每个Slider上通过MUI内置的样式API单独写样式，天然隔离每个实例的样式，hover修改状态只会作用于当前组件的Slider：

// v5版本直接用内置sx属性
<Slider
  value={sliderValue}
  sx={{
    '& .MuiSlider-valueLabel': {
      backgroundColor: colorA,
      '& *': {
        color: colorB
      }
    }
  }}
/>

如果是v4版本可以用style属性配合类名选择器实现，完全不需要修改全局主题配置。

方案2：给每个SliderBox套独立ThemeProvider加作用域隔离 #

如果必须保留createMuiTheme的overrides配置，给每个SliderBox外层单独套专属的ThemeProvider，同时给根节点加唯一类名，让主题覆盖规则仅匹配当前组件内的Slider：

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { useId } from '@material-ui/core'; // v4可用uuid库生成唯一id替代

function SliderBox() {
  // 生成当前组件唯一类名
  const uniqueScopeClass = `slider-${useId()}`;
  const [colorA, setColorA] = useState('red');
  const [colorB, setColorB] = useState('blue');

  // 主题覆盖规则仅匹配当前组件类名下的Slider
  const customTheme = createMuiTheme({
    overrides: {
      MuiSlider: {
        root: {
          [`.${uniqueScopeClass} & .MuiSlider-valueLabel`]: {
            backgroundColor: colorA,
            '& *': {
              color: colorB
            }
          }
        }
      }
    }
  });

  const handleHover = () => {
    setColorA(prev => prev === 'red' ? 'blue' : 'red');
    setColorB(prev => prev === 'blue' ? 'red' : 'blue');
  };

  return (
    <div className={uniqueScopeClass} onMouseEnter={handleHover}>
      <ThemeProvider theme={customTheme}>
        <Slider />
        {/* 其他输入组件 */}
      </ThemeProvider>
    </div>
  );
}

方案3：用makeStyles生成绑定实例的动态样式 #

v4版本也可以用makeStyles传入动态参数生成独立样式：

import { makeStyles } from '@material-ui/core/styles';

const useSliderStyles = makeStyles({
  root: {
    '& .MuiSlider-valueLabel': props => ({
      backgroundColor: props.colorA,
      '& *': {
        color: props.colorB
      }
    })
  }
});

function SliderBox() {
  const [colorA, setColorA] = useState('red');
  const [colorB, setColorB] = useState('blue');
  const sliderClasses = useSliderStyles({ colorA, colorB });

  const handleHover = () => {
    setColorA(prev => prev === 'red' ? 'blue' : 'red');
    setColorB(prev => prev === 'blue' ? 'red' : 'blue');
  };

  return (
    <div onMouseEnter={handleHover}>
      <Slider classes={{ root: sliderClasses.root }} />
      {/* 其他输入组件 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者user12246115