我的 makeStyle Material UI 中的样式规则不起作用

Question

我想在TextField 组件上应用field 类。但边距不适用。 我的代码如下：

import React from 'react';
import { Typography, Button, Container, TextField } from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  field : {
    marginTop: 20,
    marginBottom: 20,
    display: 'block'
  }
});


export default function Create() {
  
  const classes = useStyles();
  
  return (
    <Container>
      <Typography
        variant="h6"
        component="h2"
        color="textSecondary"
        gutterBottom
      >
        Create new page
      </Typography>
      <form noValidate autoComplete='off'>
        <TextField 
          className={classes.field}
          label='Note title'
          variant='outlined'
          color='secondary'
          fullWidth
          required
        />
        <TextField 
          className={classes.field}
          label='Note Details'
          variant='outlined'
          color='secondary'
          fullWidth
          multiline
          rows={4}
          required
        />
      </form>
      <Button
        type = 'sybmit'
        variant = 'contained'
        color = 'secondary'
        endIcon = {<SendIcon />}
      >
        Submit
      </Button>
    </Container>
  )
}

Answer 1

在 v5 MUI 上，@mui/styles 样式解决方案已弃用。在documentation，他们放了这条消息，

⚠️ @mui/styles 是 MUI 的传统样式解决方案。它在 v5 中已弃用。它依赖于 JSS 作为样式解决方案，@mui/material 中不再使用它。如果您不想在捆绑包中同时包含情感和 JSS，请参阅@mui/system 文档，这是推荐的替代方法。

这是他们为组件设置样式的新解决方案 - https://mui.com/system/styled/