reactjs - 边距在使用 MUI makeStyles 的 TextField 中不起作用
问题描述
我正在尝试通过制作使用 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>
)
}
所有这些都在一个文件中
这是屏幕截图。
解决方案
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"
}
}
推荐阅读
- iis - IIS 重写规则以阻止任何带有和符号的 URL 请求
- c++ - 如何在 Qt 中保存 3DSurface?
- python - 如何获取下面带有特定 a 标签的 h2?
- asynchronous - 在 Asp Net Core 服务中运行异步方法的位置
- java - AsyncServerRequestHandler 如何设置响应标头?
- r - 如何让 EXCEL 使用 fwrite 在 R 中解释没有科学记数法的字符变量?
- javascript - HighlightJS 出现的部分 CSS 样式
- javascript - 具有更多输入的 JSON 搜索
- excel - Excel JS API - SettingCollection 不持久
- java - JPA (Hibernate) / QueryDSL left join with condition 不起作用