我们应该将Material-UI与React一起使用吗 [英] Should we use Material-UI with React

问题描述

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

I am trying to design a login page in react and found material-ui, now question is should be use Material-UI? Also, in following examples how I can put styles in a separate file? I think it should be put in some .css file if yes then how following code could be put in 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>
  );
}

引用: https://codesandbox.io/s/material-demo-guyt6 index.js

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

推荐答案

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

You can create a file next to your BasicTextFields.jsx, called styles.jsx. I would not add the styling into a CSS in this case.

在 styles.jsx 中，您可以具有以下内容:

In styles.jsx you could have the following:

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

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

export default useStyles;

然后只需按如下所示导入您的组件:

Then simply import in your component as the following:

import useStyles from './styles';

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

   return (
       ...
   );
}

重要的部分是您需要在组件内部使用 const classes = useStyles().如果在外部使用，则会收到无效的挂接调用.错误消息.

Important part is that you need to use const classes = useStyles() inside your component. If you use outside you will get Invalid hook call. error message.

至少这是我在副项目中所拥有的.我希望这会有所帮助！

At least that's what I have in my side project. I hope this helps!

这篇关于我们应该将Material-UI与React一起使用吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！