Should we use Material-UI with React [closed]

问题

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 1 year ago.

Improve this question

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

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

回答1:

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.

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

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!

来源：https://stackoverflow.com/questions/59331002/should-we-use-material-ui-with-react