reactjs - Material UI : Is it possible to put the makeStyle styles in a separate file?

Question

这个问题在这里已经有了答案:





Should we use Material-UI with React [closed]

(1 个回答)


1年前关闭。




我很高兴能够将 Hook API 样式放在一个单独的文件中以保持整洁。

你知道这是否可能以及如何做到吗？我在官方文档中没有找到任何东西，而且我尝试过的一切都失败了。

Answer 1

makeStyles给你一个useStyles您在功能组件中调用的钩子(Hook)。您绝对可以将其移出到单独的文件中并导入 useStyles Hook

样式.js

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  root: {
    backgroundColor: 'red',
    color: props => props.color,
  },
});

export { useStyles };

组件.js

import React from 'react';
import {useStyles} from './styles.js'
export default function MyComponent(props) {
  const classes = useStyles(props);
  return <div className={classes.root} />;
}