如何修改MUI TextField(v5)外部标签样式且不影响内部标签

要分别修改外部（浮动状态）和内部（占位状态）的标签样式，需要针对MUI TextField标签的不同状态进行精准样式覆盖，以下是两种实现方式：

方式一：使用sx内联样式 #

直接在TextField组件的sx属性中，通过CSS伪类和MUI内置类名区分两种状态：

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

export default function CustomTextField() {
  return (
    <TextField
      label="标签文本"
      variant="outlined"
      sx={{
        // 外部浮动状态标签（输入框有值/聚焦时）
        '& .MuiInputLabel-root.Mui-focused, & .MuiInputLabel-root.MuiFormLabel-filled': {
          fontWeight: 'bold',
          fontSize: '1.2rem',
          backgroundColor: '#e0e0e0',
          padding: '0 4px',
          borderRadius: '2px',
        },
        // 内部占位状态标签（输入框为空且未聚焦时）
        '& .MuiInputLabel-root:not(.Mui-focused):not(.MuiFormLabel-filled)': {
          fontWeight: 'normal',
          backgroundColor: 'transparent',
        },
        // 配合内部标签，设置输入框白色背景
        '& .MuiOutlinedInput-root': {
          backgroundColor: '#fff',
        }
      }}
    />
  );
}

方式二：使用styled创建可复用组件 #

如果需要在多个地方复用该样式，用MUI的styled工具封装自定义组件：

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

const CustomStyledTextField = styled(TextField)(({ theme }) => ({
  '& .MuiInputLabel-root.Mui-focused, & .MuiInputLabel-root.MuiFormLabel-filled': {
    fontWeight: theme.typography.fontWeightBold,
    fontSize: theme.typography.h6.fontSize,
    backgroundColor: theme.palette.grey[200],
    padding: '0 4px',
    borderRadius: 2,
  },
  '& .MuiInputLabel-root:not(.Mui-focused):not(.MuiFormLabel-filled)': {
    fontWeight: theme.typography.fontWeightRegular,
    backgroundColor: 'transparent',
  },
  '& .MuiOutlinedInput-root': {
    backgroundColor: theme.palette.common.white,
  },
}));

export default function App() {
  return <CustomStyledTextField label="标签文本" variant="outlined" />;
}

关键说明 #

• Mui-focused：输入框聚焦时的标签类名
• MuiFormLabel-filled：输入框有值时的标签类名
• 通过:not()伪类排除上述两种状态，即可精准定位内部占位状态的标签
• 给外部标签添加padding是为了让灰色背景完整包裹文本，避免和输入框边框重叠

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