如何在MaterialUI v5中覆写嵌套子组件ToggleButton的样式？

你之前的样式不生效是因为选择器写法错误：&指代当前StyledToggleGroup组件的根元素类，直接写&.xxx是给组件自身添加样式，而非选中内部的ToggleButton子组件。需要改用后代选择器来定位子组件：

修改后的StyledToggleGroup样式代码：

const StyledToggleGroup = styled(ToggleOptionsGroup)(
    ({ theme: { palette, spacing } }) => ({
      height: spacing(10),
      borderRadius: '6px',
      boxShadow: 'none',

      '&:hover': {
        boxShadow: 'none',
      },
      '&.MuiToggleButtonGroup-root':{
        gap: '0px'
      },
      // 选中组内所有标准样式的ToggleButton
      '& .MuiToggleButton-standard':{
        backgroundColor:'red',
      },
      // 选中组内处于选中状态的ToggleButton
      '& .MuiToggleButtonGroup-grouped.Mui-selected': {
        backgroundColor:'green',
      }
    })
);

关键说明： #

• & .MuiToggleButton-standard：通过空格分隔，匹配当前组件下所有带有MuiToggleButton-standard类的后代元素（即内部的ToggleButton）
• & .MuiToggleButtonGroup-grouped.Mui-selected：匹配当前组件下同时拥有MuiToggleButtonGroup-grouped和Mui-selected类的元素，对应分组内被选中的按钮
• 如果需要仅匹配直接子节点的ToggleButton，可以把空格换成>，比如& > .MuiToggleButton-standard

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