在reactjs项目中使用Material UI的正确方法

Question

我最近开始使用Material UI，但不确定使用它的正确方法是什么。有时候我想自定义Material UIcomponents的样式。但是为此，我必须在“ .js”文件中工作，我认为这不合适。

是否有一种方法可以将Material UI组件的多个自定义样式/组件存储在另一个文件中，然后从那里导入样式/组件？

谢谢！

Answer 1

将样式与组件分离没有问题。

我什至将makeStyles钩子导入styles.js内。

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

const styles = makeStyles(theme => ({
  main: {
    padding: theme.spacing(2),
  },
}));

export default styles;

如果愿意，可以将其导入组件中

// Component.jsx
import React from 'react';
import styles from './styles';

const Component = () => {
    const classes = styles();
    return (
      <WhatEverComponent classsName={classes.main}/>
    );
}