reactjs - 我如何共享 jss 样式以与 Material UI 使用react

Question

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

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

代码示例:

组件1.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

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

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>
  )
};