在Material UI Next与React中实现嵌套元素的选择器特异性

嘿，这个需求我熟！MUI的JSS语法本身就支持嵌套选择器，和你用伪类的思路完全相通，我给你分享几个实用的实现方案：

如果你想直接控制Toolbar里的内置组件（比如Typography、IconButton这类），可以直接在父元素的样式里嵌套子元素的默认类名，逻辑和CSS嵌套一致：

const styles = {
  appbar: {
    background: '#6d6146',
    // 父元素hover时的样式
    '&:hover': {
      background: '#9e8e6a',
      // 嵌套子元素：当父元素hover时，改变Typography的颜色
      '& .MuiTypography-root': {
        color: '#ffffff',
        transition: 'color 0.3s ease'
      }
    },
    // 子元素的默认样式
    '& .MuiTypography-root': {
      color: '#333333',
      transition: 'color 0.3s ease'
    }
  }
};

// 使用方式
<Toolbar className={classes.appbar}>
  <Typography>我是嵌套在Toolbar里的文本</Typography>
</Toolbar>

这里的&代表当前的父选择器（也就是.appbar类），所以& .MuiTypography-root等价于CSS里的.appbar .MuiTypography-root，hover状态下就是.appbar:hover .MuiTypography-root。

如果不想依赖MUI的默认类名（避免版本更新导致类名变化），可以给子元素单独定义类，然后通过JSS的变量引用语法来关联父元素的状态：

const styles = {
  appbar: {
    background: '#6d6146',
    '&:hover': {
      background: '#9e8e6a',
      // 用$符号引用我们定义的子元素类
      '& $toolbarText': {
        color: '#ffffff'
      }
    }
  },
  toolbarText: {
    color: '#333333',
    transition: 'color 0.3s ease'
  }
};

// 使用方式
<Toolbar className={classes.appbar}>
  <Typography className={classes.toolbarText}>我是嵌套的自定义类文本</Typography>
</Toolbar>

这种写法更稳定，因为自定义类名完全由你控制，不会受MUI版本迭代的影响。

如果你用的是MUI v5及以上版本，styled组件的写法会更直观，完全支持CSS-in-JS的嵌套逻辑，代码可读性更高：

import { styled } from '@mui/material/styles';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

const StyledToolbar = styled(Toolbar)({
  background: '#6d6146',
  '&:hover': {
    background: '#9e8e6a',
    // 直接嵌套子元素的类选择器
    '& .custom-text': {
      color: '#ffffff'
    }
  },
  '& .custom-text': {
    color: '#333333',
    transition: 'color 0.3s ease'
  }
});

// 使用方式
<StyledToolbar>
  <Typography className="custom-text">我是styled组件里的嵌套文本</Typography>
</StyledToolbar>

小提示： #

• 样式不生效？检查选择器的特异性！如果有更高优先级的样式覆盖，可以通过增加嵌套层级（比如& > .custom-text）来提升特异性，尽量避免用!important。
• 记得加过渡效果，让样式变化更平滑，提升用户体验。

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