首次使用Material UI如何复用CSS样式？求简洁解决方案

你已经迈出了正确的第一步——利用createMuiTheme来管理全局样式变量，但确实还有更高效的方式来减少重复代码，同时贴合Material UI的CSS-in-JS设计理念。下面是几个实用的解决方案，你可以根据自己的使用场景选择：

1. 全局覆盖组件默认样式（最适合统一全局风格） #

如果你希望某个组件（比如Typography）在整个项目中都默认使用特定样式（比如自定义字体、居中对齐），可以直接在Theme里覆盖组件的默认配置，这样不用手动给每个组件加className。

修改你的createMuiTheme代码：

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

const theme = createMuiTheme({
  fontFamily: {
    primary: "\"IM Fell DW Pica SC\", serif",
  },
  // 全局覆盖Typography组件的默认样式
  components: {
    MuiTypography: {
      styleOverrides: {
        // 针对所有variant的Typography应用基础字体
        root: {
          fontFamily: theme => theme.fontFamily.primary,
        },
        // 单独给caption variant加额外样式
        caption: {
          textAlign: 'center',
          fontWeight: 'bold',
        },
      },
    },
  },
});

这样你的<Typography variant="caption">会自动应用字体、居中、加粗，完全不用额外写className，从根源减少重复。

2. 创建可复用的样式片段（适合零散的通用样式） #

把textAlign: 'center'、fontWeight: 'bold'这类重复样式抽成单独的工具对象，放在一个全局文件里（比如src/styles/commonStyles.js），然后在各个组件里导入复用：

// src/styles/commonStyles.js
export const commonStyles = {
  centeredText: {
    textAlign: 'center',
  },
  boldText: {
    fontWeight: 'bold',
  },
  primaryFont: {
    fontFamily: theme => theme.fontFamily.primary,
  },
};

在组件中使用：

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

const useStyles = makeStyles(theme => ({
  paragraph: {
    ...commonStyles.primaryFont,
    ...commonStyles.centeredText,
  },
  title: {
    ...commonStyles.boldText,
    fontSize: theme.typography.h6.fontSize,
  },
}));

// 在组件里
const classes = useStyles();
<Typography className={classes.paragraph}>居中的自定义字体文本</Typography>

3. 全局可复用样式钩子（贴近传统全局类的使用习惯） #

如果你习惯了传统全局样式表的复用方式，可以创建一个全局的样式钩子，定义所有通用类，然后在任意组件里导入使用：

// src/styles/globalClasses.js
import { makeStyles } from '@material-ui/core/styles';

export const useGlobalClasses = makeStyles(theme => ({
  paragraph: {
    fontFamily: theme.fontFamily.primary,
  },
  centered: {
    textAlign: 'center',
  },
  bold: {
    fontWeight: 'bold',
  },
}));

在组件中使用：

import { useGlobalClasses } from '../styles/globalClasses';

function MyComponent() {
  const globalClasses = useGlobalClasses();
  return (
    <Typography className={`${globalClasses.paragraph} ${globalClasses.centered}`}>
      复用全局类的文本
    </Typography>
  );
}

4. 封装自定义组件（适合重复使用的UI元素） #

如果某些样式组合经常和特定组件一起出现（比如“带自定义字体、居中的提示文本”），直接封装成自定义组件是最干净的方式：

// src/components/CustomTypography.js
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  root: {
    fontFamily: theme.fontFamily.primary,
    textAlign: 'center',
    fontWeight: 'bold',
  },
}));

export default function CustomTypography(props) {
  const classes = useStyles();
  return <Typography className={classes.root} {...props} />;
}

然后在任意组件里直接用：

import CustomTypography from '../components/CustomTypography';

<CustomTypography variant="caption">这里是复用的文本</CustomTypography>

这些方案都符合Material UI的设计初衷，既能减少重复代码，又能保持样式的可维护性。你可以根据自己的项目规模和使用习惯选择最合适的方式～

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