MUI TextField sx 道具不应用样式

Question

我正在尝试使用 sx 属性以一次性方式设置 TextField 组件的样式：

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

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

更新：似乎样式实际上是通过其生成的 class 添加到包装器元素中的。但我需要设置输入元素的样式。

我也尝试过使用 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'
 }}} />

MUI TextField sx 道具不应用样式

MUI TextField sx props does not apply styles

html

css

material-ui