如何使用classnames结合常规JSS类与Material-UI类覆盖特性

我来帮你搞定这个需求！其实结合自定义JSS类和MUI的覆盖类非常简单，用classnames就能轻松实现多类名的合并，下面是具体的步骤和代码示例：

第一步：准备工作 #

首先确保你已经安装了classnames包，如果还没装，执行下面的命令：

npm install classnames
# 或者用yarn
yarn add classnames

第二步：定义你的JSS样式 #

不管你是用类组件的withStyles还是函数组件的makeStyles，都可以在样式对象里同时定义自定义类和MUI覆盖类。比如：

// 类组件用withStyles的写法
import { withStyles } from '@material-ui/core/styles';

const styles = {
  // 你自己的常规自定义类
  insetListItemText: {
    paddingLeft: 24,
    color: '#555',
    // 这里可以加更多你需要的自定义样式
  },
  // 用于覆盖MUI组件的类（比如针对ListItemText的样式调整）
  listItemTextOverride: {
    marginTop: 8,
    marginBottom: 8,
    // 嵌套选择器覆盖MUI的内部类
    '& .MuiListItemText-primary': {
      fontSize: 16,
      fontWeight: 600
    }
  }
};

第三步：用classnames合并类名 #

在组件里，把自定义类和MUI覆盖类通过classnames合并，传给目标元素的className属性即可：

类组件示例 #

import React from 'react';
import ListItemText from '@material-ui/core/ListItemText';
import classNames from 'classnames';

class MyComponent extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <ListItemText
        // 直接传入多个类，classnames会自动合并成一个字符串
        className={classNames(classes.insetListItemText, classes.listItemTextOverride)}
        primary="主文本内容"
        secondary="次要文本内容"
      />
    );
  }
}

export default withStyles(styles)(MyComponent);

函数组件示例（用makeStyles） #

如果你用的是函数式组件，写法类似，只是获取样式类的方式不同：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ListItemText from '@material-ui/core/ListItemText';
import classNames from 'classnames';

const useStyles = makeStyles({
  insetListItemText: {
    paddingLeft: 24,
    color: '#555',
  },
  listItemTextOverride: {
    marginTop: 8,
    marginBottom: 8,
    '& .MuiListItemText-primary': {
      fontSize: 16,
      fontWeight: 600
    }
  }
});

const MyComponent = () => {
  const classes = useStyles();
  return (
    <ListItemText
      className={classNames(classes.insetListItemText, classes.listItemTextOverride)}
      primary="主文本内容"
      secondary="次要文本内容"
    />
  );
};

export default MyComponent;

额外技巧：动态添加类 #

如果需要根据条件动态添加类（比如只有在某个状态下才应用覆盖类），classnames也能轻松处理：

className={classNames(
  classes.insetListItemText,
  // 当shouldOverride为true时，才添加覆盖类
  { [classes.listItemTextOverride]: this.props.shouldOverride }
)}

这样一来，你的自定义样式和MUI的覆盖样式就会同时生效，完美结合啦！

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