如何在jss中创建和使用全局css变量

如何解决如何在jss中创建和使用全局css变量

很抱歉我的问题不清楚。我不知道关键字，所以我会尽量解释清楚。 我正在使用 reactjs 构建一个 web 项目并使用 jss 进行 UI 样式。我的网站只使用了 4 种颜色，并且许多组件中的某些元素具有相同的样式：例如：我的页眉和页脚具有相同的按钮样式。我想为此按钮创建一个全局类 css 样式和全局颜色变量。或重用颜色变量名称而不是使用十六进制代码。

这是我的标题 style.js 文件：每个人都可以看到我有 2 个相同的行：color: "#02cdce"，我如何为这个 HEX 代码分配一个全局变量并使用它的名称而不是十六进制代码。 和一个全局类 css 放入我想要的元素中。

export const useStyles = makeStyles((theme) => ({
  brand: {
    "&::after": {
      content: '"Khai"',**color: "#02cdce",**
      fontWeight: "bold",},menuItem: {
    "&:hover": {
      **color: "#02cdce",**

      transition: "all 0.4s",}));

感谢阅读我的问题。

解决方法

我觉得发布这个很奇怪，但它是否像将值存储在变量中一样简单？

export const globalColors = {
  primaryColor: '#02cdce'
} 

export const useStyles = makeStyles((theme) => ({
  brand: {
    "&::after": {
      content: '"Khai"',color: globalColors.primaryColor,fontWeight: "bold",},menuItem: {
    "&:hover": {
      color: globalColors.primaryColor,transition: "all 0.4s",}));