MUI sx道具不应用样式

Question

我试图使用TextField道具一次性地对sx组件进行样式设置：

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

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

更新:看起来样式实际上是通过它生成的类添加到包装器元素中的。但我需要输入元素的样式。

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

工作CodeSandbox：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'
 }}} />