我如何共享 jss 样式以与 Material UI 做出反应

如何解决我如何共享 jss 样式以与 Material UI 做出反应

我有几个使用 { makeStyles } from "@material-ui/core/styles"; 生成 jss 的 .js 文件。我使用 className={classes.myClass}，最后我用 const classes = useStyles(); 调用它。这是一个众所周知的设置。问题是我在所有 react 组件中都使用了相同的 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，但我仍然需要重复两次。

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

解决方法

至少在每个要使用 classes = useStyles() 反应钩子的组件中都需要 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>
  )
};