我们应该在 React 中使用 Material-UI [关闭]

Question

我正在尝试在 react 中设计一个登录页面，发现 material-ui，现在的问题是应该使用 Material-UI 吗？另外，在以下示例中，我如何将样式放在单独的文件中？我认为应该将其放入某个.css 文件中，如果是，那么如何将以下代码放入css 文件中：

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

const useStyles = makeStyles(theme => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: 200,
    },
  },
}));

export default function BasicTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <TextField id="standard-basic" label="Standard" />
      <TextField id="filled-basic" label="Filled" variant="filled" />
      <TextField id="outlined-basic" label="Outlined" variant="outlined" />
    </form>
  );
}

参考：https://codesandbox.io/s/material-demo-guyt6index.js

Answer 1

您可以在您的BasicTextFields.jsx 旁边创建一个名为styles.jsx 的文件。在这种情况下，我不会将样式添加到 CSS 中。

在styles.jsx 中，您可以拥有以下内容：

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

const useStyles = makeStyles(theme => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
      width: 200,
    },
  },
}));

export default useStyles;

然后只需按以下方式导入您的组件：

import useStyles from './styles';

export default function BasicTextFields() {
   const classes = useStyles();

   return (
       ...
   );
}

重要的是您需要在组件中使用const classes = useStyles()。如果你在外面使用你会得到Invalid hook call.错误信息。

至少这是我在我的业余项目中所拥有的。我希望这会有所帮助！