When it comes to designing a login page in react, I stumbled upon material-ui. The real question is, should we utilize Material-UI for this purpose? Furthermore, how can we manage styles in a separate file in the given examples? It seems logical to place them in a .css file. But, how can we transfer the following code into a 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>
);
}
Reference: https://codesandbox.io/s/material-demo-guyt6 index.js