我如何分享 jss 样式以响应 material UI

Question

我有几个 .js 文件使用 { makeStyles } from "@material-ui/core/styles"; 生成 jss。我使用 className={classes.myClass}，最后我用 const classes = useStyles(); 调用它这是一个众所周知的设置。问题是我在我所有的反应组件中使用相同的 jss 代码。它非常可重复且耗时，因为开发时需要在每个文件中更改 jss 代码。

我试图用所有 jss 代码制作一个单独的文件，然后导出和导入它，但后来我遇到了 className={classes.myClass} 返回 classes 不存在或未声明的问题，这是真的，因为 const classes = useStyles() 现在在另一个文件中。

代码示例：

component1.js

{....}

const useStyles = makeStyles ({
  myfontStyle: {
    color: "red"
  },
});

export default function Component1() {

  const classes = useStyles();

  return (

    <div className={classes.myfontStyle}>
      Helo world 
    </div>
  )
};

component2.js

{....}

const useStyles = makeStyles ({
  myfontStyle: {
    color: "red"
  },
});

export default function Component2() {

  const classes = useStyles();

  return (

    <div className={classes.myfontStyle}>
      Helo world 
    </div>
  )
};

如我们所见，这两个组件共享相同的 jss，但我仍然需要重复两次。

那么我该如何正确的解决这个问题呢？谢谢大家的回答。

Answer 1

您至少需要在每个要使用 useStyles 反应挂钩的组件中使用 classes = useStyles()。没有什么可以阻止您在它自己的文件中定义自定义挂钩，并且将其导入到您要在其中使用样式的组件中。

export const useMyFontStyles = makeStyles ({
  myfontStyle: {
    color: "red"
  },
});

在组件中：

import { useMyFontStyles } from '../path/to/useMyFontStyles';

export default function Component2() {
  const classes = useMyFontStyles();

  return (
    <div className={classes.myfontStyle}>
      Helo world 
    </div>
  )
};

我如何分享 jss 样式以响应 material UI

How do I share jss styles in react with material UI

reactjs

material-ui

jss