我想使用样式化函数设置MUI Textfield组件的样式
const StyledTextField = styled(TextField)({ padding: 5 });
我还想在Textfield中设置输入和输入组件的样式.以前我是通过应用样式来做到这一点
<TextField
InputProps={{ style: { color: 'red' } }}
inputProps={{ className: '...' }}
/>;
是否可以使用样式化函数设置输入和输入的样式，以便最终只使用已经样式化的StyledTextField组件，而不将额外的样式和类名props 传递给StyledTextfield.
下面的示例显示了如何针对TextField内的不同元素.
FormControl元素(例如下面的margin)，这是TextField的最外层元素."& .MuiInputLabel-root": {...}来确定标签元素的目标.""& .MuiInputBase-root": {...}可用于定位Input元素(相当于通过InputProps传递的样式)."& .MuiInputBase-input": {...}可用于定位input元素(相当于通过inputProps传递的样式).import * as React from "react";
import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";
const StyledTextField = styled(TextField)({
margin: 5,
"& .MuiInputLabel-root:not(.MuiInputLabel-shrink)": {
transform: "translate(14px, 8px) scale(1)"
},
"& .MuiInputLabel-root": {
color: "green"
},
"& .MuiInputLabel-root.Mui-focused": {
color: "purple"
},
"& .MuiInputBase-root": {
color: "red"
},
"& .MuiInputBase-input": {
padding: 8
}
});
export default function BasicTextField() {
return (
<>
<TextField id="outlined-basic" label="Default" />
<StyledTextField id="styled" label="Styled" />
</>
);
}
