【问题标题】:How can I override MUI 5 input padding right?如何正确覆盖 MUI 5 输入填充?
【发布时间】:2022-10-13 14:43:10
【问题描述】:

我正在使用 MUI 5,我想更新输入默认填充权。

我创建了一个CustomizedNativeSelect 并在其中更新了MuiInputBase-input 填充。但是,这个新的padding-right 不能覆盖默认值。

除了使用inputPropsstyles 之外,有没有办法可以覆盖padding-right

https://codesandbox.io/s/optimistic-pare-lrxeiv?file=/demo.tsx

【问题讨论】:

    标签: reactjs material-ui


    【解决方案1】:

    您可以通过这种方式更改填充。

    const CustomizedNativeSelect = styled(NativeSelect)`
     .MuiInputBase-input {
       padding: 10px 55px;
     }
     .css-1dmqq7i-MuiNativeSelect-select-MuiInputBase-input-MuiInput-input.css-1dmqq7i-MuiNativeSelect-select-MuiInputBase-input-MuiInput-input.css-1dmqq7i-MuiNativeSelect-select-MuiInputBase-input-MuiInput-input {
       padding-right: 100px;
      }
    `;
    

    【讨论】:

      【解决方案2】:

      您可以直接在 MUI 组件上使用sx

      <NativeSelect
        value={3}
        sx={{
          paddingTop: 2,
          paddingBottom: 2,
          paddingRight: 10,
          paddingLeft: 10,
        }}
      >
        {options}
      </NativeSelect>;
      

      Link 到沙盒。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2022-01-22
        • 1970-01-01
        • 2021-10-22
        • 1970-01-01
        • 1970-01-01
        • 2019-10-29
        • 1970-01-01
        相关资源
        最近更新 更多