如何在Material UI的createStyles中实现样式类继承复用

Material UI v4 基于 JSS 实现样式能力，你可以通过以下三种常用方式实现test2复用test1的样式属性： #

方案1：提取公共样式变量（最推荐） #

将公共样式抽离为独立变量，在需要复用的位置直接展开即可，逻辑直观无额外依赖。

import { createStyles, Theme } from '@material-ui/core/styles';

export default (theme: Theme) => {
    const { primary } = theme.palette;
    // 提取test1的公共样式
    const test1BaseStyle = {
        fontSize: '30px',
    };

    return createStyles({
        test1: test1BaseStyle,
        test2: {
            // 展开复用test1的所有样式属性
            ...test1BaseStyle,
            '& > div': {
                color: primary.main,
                marginTop: '20px',
            },
        },
    });
};

如果需要复用的是test2内部子选择器的样式，将展开语法放到对应子选择器的样式对象内即可。 #

方案2：组件内合并类名 #

无需修改原有样式定义，在组件中同时绑定两个类名即可实现样式继承，Material UI 内置了clsx库用于类名拼接，无需额外安装依赖。
样式文件保持原有代码不变，组件内调用示例：

import clsx from 'clsx';
import useStyles from './样式文件路径';

const DemoComponent = () => {
  const classes = useStyles();
  // 类名靠后的优先级更高，同名属性会覆盖前面的定义
  return <div className={clsx(classes.test1, classes.test2)}>组件内容</div>
}

方案3：JSS 原生规则引用 #

利用JSS内置的规则引用语法，直接在createStyles内引用已定义的样式规则：

import { createStyles, Theme } from '@material-ui/core/styles';

export default (theme: Theme) => {
    const { primary } = theme.palette;

    return createStyles({
        test1: {
            fontSize: '30px',
        },
        // 数组格式第一项引用已有的test1规则，第二项写test2自定义样式
        test2: [
            '$test1',
            {
                '& > div': {
                    color: primary.main,
                    marginTop: '20px',
                },
            }
        ],
    });
};

该方案依赖JSS专属语法，可读性较低，仅适合临时快速复用的场景。

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