Material-UI类名每次刷新都变动 如何固定类名以修改TextField样式

Material-UI默认的CSS-in-JS方案会生成带随机哈希的动态类名，这类类名会随代码修改、构建流程变动更新，不能作为自定义样式的选择器。可通过以下几种稳定方案实现输入框缩小调整：

• 方案1：使用内置sx属性（无需额外处理类名，适配单次样式调整）
  直接在TextField组件上通过sx属性编写样式，内置的类名匹配逻辑自动适配组件结构：

<TextField
  label="缩小输入框"
  variant="outlined"
  sx={{
    width: 200,
    // 调整输入框本体尺寸
    '& .MuiInputBase-root': {
      height: 32,
      fontSize: '0.875rem'
    },
    // 同步调整标签样式适配缩小尺寸
    '& .MuiInputLabel-root': {
      fontSize: '0.875rem',
      transform: 'translate(14px, 9px) scale(1)',
      '&.MuiInputLabel-shrink': {
        transform: 'translate(14px, -6px) scale(0.75)'
      }
    }
  }}
/>

• 方案2：绑定自定义固定类名（适配全局CSS写样式的场景）
  给TextField传入自定义的固定类名，配合MUI公开的固定前缀类名写样式，完全不会随构建变动：

// 组件调用代码
<TextField
  label="自定义类名输入框"
  className="custom-small-textfield"
/>

对应CSS样式代码：

.custom-small-textfield .MuiInputBase-root {
  height: 32px;
  font-size: 14px;
}
.custom-small-textfield .MuiInputLabel-root {
  font-size: 14px;
}
.custom-small-textfield .MuiInputLabel-shrink {
  transform: translate(14px, -6px) scale(0.75);
}

• 方案3：用styled封装复用组件（适配多场景复用的小尺寸输入框）

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

const SmallTextField = styled(TextField)(() => ({
  width: 200,
  '& .MuiInputBase-root': {
    height: 32,
    fontSize: '0.875rem'
  },
  '& .MuiInputLabel-root': {
    fontSize: '0.875rem',
    transform: 'translate(14px, 9px) scale(1)',
    '&.MuiInputLabel-shrink': {
      transform: 'translate(14px, -6px) scale(0.75)'
    }
  }
}));

// 业务代码直接调用即可
<SmallTextField label="复用小输入框" />

注意事项 #

• 所有以Mui为前缀的类名是Material-UI的公开稳定类名，不会随构建、小版本更新变动，可放心作为样式选择器使用
• 不要依赖带随机哈希后缀的动态类名写样式，这类类名是内部运行时生成的，每次代码修改、重新构建都会重新计算哈希值，稳定性极低

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