reactjs - 如何在 ReactJS useStyles 中让两个类名共享相同的样式

Question

ReactJS useStyles 新手问题。在常规 CSS 中，我可以让两个类共享相同的样式，例如....firstDiv, .secondDiv { border: 1px solid red; } 但我不清楚如何使用 ReactJS useStyle 做到这一点。

const useStyles = makeStyles((theme) => ({
    firstDiv: {
       border: "border: 1px solid red"
    },
    secondDiv: {
       border: "border: 1px solid red"
    }
})

我试过 firstDiv, secondDiv: { border: "border: 1px solid red" }但这样做只会返回一个引用错误，指出 firstDiv 未定义。
非常感谢任何帮助。我确定这是一个简单的语法问题，但我所有的在线搜索都只返回有关如何向元素添加两个类的示例，这不是我要找的。提前致谢!

Answer 1

自 makeStyles需要一个返回对象的 JavaScript 函数，您的问题实际上是:“如何创建一个对象，其中两个对象键具有相同的值？”
对于那个问题，你可能会找到答案:here .
例如，如果您希望两个类共享某些属性，则只有提取它们才能实现:

const sharedProperties = {
   border: "border: 1px solid red",
   color: "red"
};

const useStyles = makeStyles((theme) => ({
    firstDiv: {
       fontSize: 10,
       ...sharedProperties, 
    },
    secondDiv: {
       fontSize: 20,
       ...sharedProperties,
    }
});