制作 Styles 反应 JS

Question

I have this problem. I'm trying to work with material-ui for my web design, I have this code:

const useStyles = makeStyles((theme) => ({
  card: {
    marginTop: theme.spacing(10),
    direction:"column",
    alignItems:"center",
    justify:"center",
    borderRadius: 30,
    boxShadow: ' 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
    },
  contenidoFormulario: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.primary.main,
  },
  formulario: {
    width: '60%',
    marginTop: theme.spacing(1),
  },
  botonIngresar: {
    margin: theme.spacing(3, 0, 2),
    borderRadius: 50,
  },
}));

And I'm using it in three diferent components (Login.js, Newaccount.js, Forgotpassword.js), how do I re-use it to avoid repeating the same code?

Answer 1

You can create a file like commonStyles.js and export your style. In other components, you just need to import this style and call it inside your component. Read more about combine styles in MUI via this issue and the official document . Try this:

In commonStyles.js :

 ... export const commonStyles= makeStyles((theme) => ({ card: { marginTop: theme.spacing(10), direction:"column", alignItems:"center", justify:"center", borderRadius: 30, boxShadow: ' 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)', }, contenidoFormulario: { marginTop: theme.spacing(8), display: 'flex', flexDirection: 'column', alignItems: 'center', }, avatar: { margin: theme.spacing(1), backgroundColor: theme.palette.primary.main, }, formulario: { width: '60%', marginTop: theme.spacing(1), }, botonIngresar: { margin: theme.spacing(3, 0, 2), borderRadius: 50, }, }));

In Login.js :

 import {commonStyles} from '../commonStyles' import {makeStyles} from '@material-ui/core/styles' const useStyles = makeStyles(theme => ({... })) const Login = () => { const classes = useStyles() const commons = commonStyles() return ( <div className={commons.card}>... </div> ) } export default Login