如何使用@mui/styles的makeStyles将三个属性合并为一行代码？

如果你想在makeStyles中将多个主题排版属性合并到一行，用对象展开运算符（...）就能实现，直接复用主题排版配置的同时，把自定义属性合并进去。

示例代码 #

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
  targetClass: {
    // 合并三个属性到一行（以复用主题排版+两个自定义属性为例）
    ...theme.typography.body1, color: theme.palette.text.primary, padding: theme.spacing(2)
  }
}));

补充说明 #

• 用...theme.typography.xxx展开主题里的排版属性（比如body1、h6这类对应你主题配置的项）
• 后续直接追加要合并的其他CSS属性，用逗号分隔就能实现一行书写
• 如果觉得一行太挤，也可以换行但保持逗号连接，兼顾简洁性和可读性：

targetClass: {
  ...theme.typography.body1,
  color: theme.palette.text.primary,
  padding: theme.spacing(2)
}

注意点 #

• 要确保你的主题配置里存在对应的typography属性，不然样式会失效
• 如果主题排版属性和自定义属性重复，自定义属性的优先级更高

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