React组件子元素Prop样式失效：MUI滑块图标fill样式不生效

基于MUI Slider开发了一个带图标滑块，支持通过props传入左右图标（leftSliderIcon和rightSliderIcon），但本地环境中针对.MuiSvgIcon-root类设置的fill: red样式未生效，其他类样式均正常工作，尝试过相关方案但无效，代码如下：

import * as React from "react";
import { Slider as MuiSlider, SliderProps as MuiSliderProps, Box } from '@mui/material';
import { styled } from '@mui/material/styles';
import Stack from '@mui/material/Stack';
import {InputRangeSliderProps} from '../InputRangeSlider';

export function ContinuousIconSliderStyled(props: InputRangeSliderProps) {
  const [value, setValue] = React.useState<number>(30);

  const handleChange = (event: Event, newValue: number | number[]) => {
    setValue(newValue as number);
  };

  const SliderStyled = styled(MuiSlider)<MuiSliderProps>(({ theme, color }) => ({
    height: 2,
    width: 100,
    ...(color === "primary" && {
      color: theme.colors.main.fillCtaPrimarySolidDefault,
      '& .MuiSlider-valueLabel': {
        color: theme.colors.main.fillCtaPrimarySolidDefault
      },
      // 此处样式不生效
      '& .MuiSvgIcon-root': {
        fill: 'red',
      },
    }),
    ...(color === "secondary" && {
      color: theme.colors.main.borderSecondaryEnabled,
      '& .MuiSlider-valueLabel': {
        color: theme.colors.main.borderSecondaryEnabled
      },
    }),
    '& .MuiSlider-track': {
      border: 'none',
    },
    '& .MuiSlider-thumb': {
      height: 12,
      width: 12,
      '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
        boxShadow: '1',
      },
      '&:before': {
        display: 'none',
      },
    },
    '& .MuiSlider-valueLabel': {
      lineHeight: 1.2,
      fontSize: 12,
      padding: 0,
      width: 32,
      height: 32,
      borderRadius: '50% 50% 50% 0',
      transformOrigin: 'bottom left',
      transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
      '&:before': { display: 'none' },
      '&.MuiSlider-valueLabelOpen': {
        transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
      },
      '& > *': {
        transform: 'rotate(45deg)',
      },
    },
  }));

  return (
    <Box sx={{ margin: 3 }}>
      <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
        {props.leftSliderIcon}
        <SliderStyled 
          aria-label="slider-component" 
          valueLabelDisplay="auto"
          value={50} 
          onChange={handleChange} 
          color={props.color}
        />
        {props.rightSliderIcon}
      </Stack>
    </Box>
  );
}

问题根源 #

你写的& .MuiSvgIcon-root样式是作用在SliderStyled组件内部的子元素上，但左右图标是放在Stack组件中，和SliderStyled同级，并非SliderStyled的子元素，所以这个样式选择器无法匹配到这两个图标，自然不会生效。

可行解决办法 #

方案一：动态给传入的图标注入样式 #

通过React.cloneElement给传入的图标添加动态样式，保留原有样式的同时叠加填充色设置：

return (
  <Box sx={{ margin: 3 }}>
    <Stack spacing={2} direction="row" sx={{ mb: 1 }} alignItems="center">
      {props.leftSliderIcon && React.cloneElement(props.leftSliderIcon, {
        sx: {
          ...props.leftSliderIcon.props.sx,
          fill: props.color === "primary" ? "red" : "inherit"
        }
      })}
      <SliderStyled 
        aria-label="slider-component" 
        valueLabelDisplay="auto"
        value={50} 
        onChange={handleChange} 
        color={props.color}
      />
      {props.rightSliderIcon && React.cloneElement(props.rightSliderIcon, {
        sx: {
          ...props.rightSliderIcon.props.sx,
          fill: props.color === "primary" ? "red" : "inherit"
        }
      })}
    </Stack>
  </Box>
);

方案二：通过Stack组件控制图标样式 #

直接在包裹的Stack组件中添加针对图标的样式，简洁作用于Stack内所有MUI图标：

return (
  <Box sx={{ margin: 3 }}>
    <Stack 
      spacing={2} 
      direction="row" 
      sx={{ 
        mb: 1,
        '& .MuiSvgIcon-root': {
          fill: props.color === "primary" ? "red" : "inherit"
        }
      }} 
      alignItems="center"
    >
      {props.leftSliderIcon}
      <SliderStyled 
        aria-label="slider-component" 
        valueLabelDisplay="auto"
        value={50} 
        onChange={handleChange} 
        color={props.color}
      />
      {props.rightSliderIcon}
    </Stack>
  </Box>
);

额外提示 #

如果传入的图标是自定义SVG组件而非MUI的SvgIcon，需要确保组件能接收并传递sx/style属性到内部的<svg>元素上，或者直接给SVG元素设置fill属性。

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