如何使用styled函数为MUI TextField的Input及input组件设置样式

问题背景 #

我希望使用styled函数为MUI TextField组件设置样式，当前已编写代码：

const StyledTextField = styled(TextField)({ padding: 5 });

我还想为TextField内部的Input和input组件设置样式，此前我通过以下方式实现：

<TextField
    InputProps={{ style: { color: 'red' } }}
    inputProps={{ className: '...' }}
/>;

请问是否可以通过styled函数完成Input和input组件的样式设置，最终只需使用已配置好样式的StyledTextField组件，无需再传递额外的样式和类名属性？

解决方案 #

当然可以，MUI的styled函数支持通过嵌套选择器定位TextField内部的组件元素，一次性完成所有样式配置，后续直接使用封装好的StyledTextField即可。

代码示例 #

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

const StyledTextField = styled(TextField)(({ theme }) => ({
  padding: 5,
  // 配置MUI Input组件的样式
  '& .MuiInput-root': {
    color: 'red',
    backgroundColor: '#f5f5f5',
  },
  // 配置原生input元素的样式
  '& .MuiInput-input': {
    fontSize: '1rem',
    padding: '8px 10px',
    // 自定义 placeholder 样式
    '&::placeholder': {
      color: '#999',
    },
  },
  // 如果使用Outlined样式的TextField，需对应调整选择器
  '& .MuiOutlinedInput-root': {
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: '#1976d2',
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: '#2e7d32',
    },
  }
}));

核心说明 #

• 利用嵌套选择器（&指代当前StyledTextField实例），通过MUI内置的类名定位内部组件：
  • MuiInput-root对应MUI的Input组件容器
  • MuiInput-input对应原生input元素
• 不同样式变体的TextField（如Outlined、Filled、Standard）对应不同的类名，需根据实际使用的变体调整选择器
• 所有样式都封装在StyledTextField中，后续直接使用<StyledTextField label="示例" />即可，无需额外传递InputProps或inputProps

内容的提问来源于stack exchange，提问作者Andyally