Сделать стили React JS

Question

У меня такая проблема. Я пытаюсь работать с material-ui для своего веб-дизайна, у меня есть этот код:

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

И я использую его в трех разных компонентах (Login. js, Newaccount. js, Забыли пароль. js), как мне повторно использовать его, чтобы не повторять тот же код?

Answer 1

Вы можете создать файл типа commonStyles.js и экспортировать свой стиль. В других компонентах вам просто нужно импортировать этот стиль и вызвать его внутри своего компонента. Узнайте больше о комбинировании стилей в MUI в этом выпуске и в официальном документе . Попробуйте это:

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

В 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