How can I override MUI 5 input padding right?-CodePudding

I'm using MUI 5 and I want to update the input default padding right.

I have created a CustomizedNativeSelect and inside it I updated MuiInputBase-input padding. However, this new padding-right cannot override the default one.

Is there a way I can override the padding-right except using inputProps with styles?

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

CodePudding user response：

You can change the padding in this way.

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;
  }
`;

CodePudding user response：

You could use sx on the MUI component directly:

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

Link to sandbox.