ReactJS useStyles中如何让两个类名共用同一份样式规则

你之前的写法报错是因为firstDiv, secondDiv: { ... }不符合原生JS对象的语法规范，JS不支持用逗号分隔同时定义多个对象键，所以才会提示firstDiv未定义。

正确的实现方式有以下两种：

方案1：部分公共样式复用 #

适合两个类有公共样式、同时还有各自独有样式的场景，把公共样式提取为变量复用即可：

const useStyles = makeStyles((theme) => {
  // 提取公共样式片段
  const commonBorder = {
    border: "1px solid red"
  }

  return {
    firstDiv: {
      ...commonBorder,
      // 可追加firstDiv独有样式
      width: "200px"
    },
    secondDiv: {
      ...commonBorder,
      // 可追加secondDiv独有样式
      height: "100px"
    }
  }
})

方案2：全量样式复用 #

如果两个类的样式完全一致，没有独有样式，可以直接把同一个样式对象赋值给两个类：

const useStyles = makeStyles((theme) => {
  // 提前定义完整的公共样式
  const redBorderBox = {
    border: "1px solid red",
    width: "200px",
    padding: "10px"
  }

  return {
    firstDiv: redBorderBox,
    secondDiv: redBorderBox
  }
})

另外注意你原有代码里的小问题：样式对象中border的属性值多写了border: 前缀，只需要写"1px solid red"即可，否则样式无法正常生效。

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