时间戳

首页 > 解决方案 > 我的 makeStyle Materiel UI 中的样式规则不起作用

reactjs - 我的 makeStyle Materiel UI 中的样式规则不起作用

问题描述

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

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

标签： reactjsmaterial-uimakestyles

解决方案

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

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

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

推荐阅读