如何在本地JSS样式中引用全局Material-UI组件类？

我懂你想要的效果——就是在自己定义的本地样式类里，给嵌套在里面的Material-UI标准组件统一设置样式对吧？你的思路其实没大问题，就是JSS选择器的写法需要调整一下，下面给你具体的解决方案：

核心写法：正确使用JSS嵌套选择器 #

Material-UI的组件类都是以.Mui开头的CSS类，所以你在JSS里选中它们的时候，必须加上.，而且要注意&的用法（&代表当前的本地类）。

函数组件（makeStyles）示例 #

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

const useStyles = makeStyles({
  localClass: {
    // 正确写法：& 后面直接跟 .MuiGrid-item，中间无空格
    '& .MuiGrid-item': {
      backgroundColor: 'red',
      padding: '16px', // 加个padding让红色背景更显眼
      borderRadius: '4px'
    }
  }
});

export default function MyCustomGrid() {
  const classes = useStyles();
  return (
    <Grid container spacing={2} className={classes.localClass}>
      <Grid item xs={6}>
        这个Grid Item背景会变红
      </Grid>
      <Grid item xs={6}>
        这个也会跟着变红
      </Grid>
    </Grid>
  );
}

类组件（withStyles）示例 #

如果你还在用类组件，写法类似：

import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';

const styles = {
  localClass: {
    '& .MuiGrid-item': {
      backgroundColor: 'red'
    }
  }
};

class MyGridComponent extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <Grid container className={classes.localClass}>
        <Grid item xs={12}>类组件里的红色背景Grid Item</Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(MyGridComponent);

额外技巧：精准控制选择范围 #

• 如果只想选中localClass的直接子元素（不影响更深层的嵌套组件），可以用& > .MuiGrid-item
• 如果你担心硬写MUI类名会因为版本更新失效，也可以通过组件的classes属性单独给子组件加自定义类，不过这种方式更适合单个组件的样式定制，而非批量设置

为什么你原来的写法不行？ #

你之前写的'& MuiGrid-item'有两个问题：

1. 缺少.：MUI组件的类是CSS类选择器，必须用.MuiGrid-item才能匹配到DOM元素
2. 虽然空格代表后代选择器，但前提是选择器本身是正确的类名格式

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