MUI TextField sx道具不应用样式

Question

我正在尝试使用sx道具以一次性的方式对TextField组件进行样式化：

<TextField
size="small"
sx={{
padding: '1px 3px',
fontSize: '0.875rem',
lineHeight: '1.25rem',
}}
{...params}
/>

我使用的是MUI v5。如果检查输入元素，则不会应用样式。我错过了什么？

UPDATE：看起来样式实际上是通过其生成的类添加到包装器元素中的。但是我需要设置输入元素的样式。

我也尝试过使用inputProps，但根本没有效果。

Answer 1

您可以通过sx直接针对组成组件的类来设置它们的样式。例如：

<TextField
label="My Label"
defaultValue="My Value"
size="small"
sx={{
".MuiInputBase-input": {
padding: '1px 3px',
fontSize: '0.875rem',
lineHeight: '1.25rem',
}
}}
/>

工作代码沙盒：https://codesandbox.io/s/customizedinputs-material-demo-forked-jog26e?file=/demo.js

Answer 2

您可以使用的是inputProps道具。这使您可以将sx道具作为常规对象向下传递到输入组件。例如：

<TextField 
size="small"
inputProps={{
sx: {
padding: '1px 3px',
fontSize: '0.875rem',
lineHeight: '1.25rem'
}
}}
/>

此处的文档：https://mui.com/material-ui/api/text-field/#props