reactjs - 边距在使用 MUI makeStyles 的 TextField 中不起作用

Question

我正在尝试通过制作使用 MUI v5TextField的对象来为我的组件添加边距。makestyles背景颜色反映在组件中，但不反映边距和填充。这是我的代码

import React, { useState } from 'react'
import { Typography } from '@mui/material'
import { Button } from '@mui/material'
import { ButtonGroup } from '@mui/material'
import { Container } from '@mui/material'
import { makeStyles } from '@mui/styles';
import TextField from '@mui/material/TextField';

这里我使用了 makeStyles

const useStyles = makeStyles({
  field: {
    // paddingTop: '20px',
    padding: '100px',
    backgroundColor: 'red',
    marginBottom: '100px',
    // margin: 100
    // display: 'block'
  },
});

export default function Create() {
  const classes = useStyles()
return (
    <Container>


      <Typography
        variant="h6"
        component="h2"
        gutterBottom
        color="textSecondary"
      >
        Create a New Note
      </Typography>

      <form noValidate autoComplete="off" >
        <TextField
          
          className={classes.field}
          label="Note Title"
          variant="outlined"
          color="secondary"
          fullWidth
          required
          error={titleError}
        >
        </TextField>
        <Button
          type="submit"
          color="secondary"

          variant="outlined"
          onClick={() => console.log("you clicked me")}

          endIcon={<KeyboardArrowRightOutlinedIcon />}

        >Submit </Button>
      </form>

  </Container>
  )
}

所有这些都在一个文件中

这是屏幕截图。

Answer 1

TextField只是Input它内部的一个包装器组件，以输入样式为目标，您可以使用InputProps：

<TextField
  InputProps={{
    className: classes.field
  }}

编辑：由于 CSS 的特殊性，这margin在您的工作中不起作用。TextField你的风格被情绪中的另一种风格所覆盖，要修复它，使用这种技术将 className 加倍：

const useStyles = makeStyles({
  field: {
    // append the same classname to increase the specificity
    // output has something like: .makeStyles-field-5.makeStyles-field-5
    "&&": {
      marginBottom: "100px"
    }
  }