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

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

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

Ref: https://codesandbox.io/s/material-demo-guyt6 https://codesandbox.io/s/material-demo-guyt6索引.js

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

In 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.错误信息。

至少这是我的业余项目中的内容。我希望这有帮助！