如何将 material-ui TextField Input 的 inputProps 传递给 styled-components 元素？

Question

I have material-ui TextField element now and styles for it:

import TextField from "@mui/material/TextField";

const inputStyle = {
  fontSize: 24,
  pl: 2,
  pt: 0.5,
  pb: 0.5,
};

<TextField
  variant="outlined"
  inputProps={{
   sx: inputStyle,
  }}
/>

Now I want to make a component with styled-components:

import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";

export const CustomizedTextField = styled(TextField)`
  font-size: 24px;
  padding-left: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
`;

<CustomizedTextField
  variant="outlined"
/>

But it doesn't work. I'm sure I'm not passing inputProps for the TextField correctly, but I can't figure out how to do it right.

Answer 1

If you or anyone else still run into this: I'm doing something similar but am just using the 'style' input prop. I've also used the 'className' prop with success.

In your case, I believe you could just do something like:

<TextField
  variant="outlined"
  InputProps={{
    style: inputStyle,
  }}
/>

Also not sure if it matters but there seems to be some difference between the capitalized/uncapitalized versions of inputProps/InputProps. I've always used the capitalized version if that makes a difference.