扩展Material UI TextField的size属性后，自定义高度不生效如何解决？

你的写法无效是因为TextField组件不会把size属性渲染到根DOM元素上，所以&[size="large"]这类CSS选择器找不到匹配的元素——MUI组件的自定义props不会自动映射为DOM属性，只有原生HTML属性才会出现在DOM上。

下面是两种可行的解决方式，都不需要使用styled组件或自定义variant：

方式一：通过TextField的variants匹配props设置样式 #

variants是MUI主题中专门用来根据组件props匹配样式的方式，能直接识别size这个组件prop，不需要依赖DOM属性：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiTextField: {
      // 针对不同size设置样式
      variants: [
        {
          props: { size: 'small' },
          style: {
            '& .MuiInputBase-root': {
              height: '32px',
            },
          },
        },
        {
          props: { size: 'medium' },
          style: {
            '& .MuiInputBase-root': {
              height: '48px',
            },
          },
        },
        {
          props: { size: 'large' },
          style: {
            '& .MuiInputBase-root': {
              height: '56px',
            },
          },
        },
      ],
      // 默认样式（medium作为默认）
      styleOverrides: {
        root: {
          '& .MuiInputBase-root': {
            height: '48px',
          },
        },
      },
    },
  },
});

方式二：直接修改InputBase的size样式（更简洁） #

TextField的size prop会透传给内部的InputBase组件，所以直接针对InputBase的不同size设置样式，同时扩展InputBase的size类型，让它支持large：

1. 扩展InputBase的size类型 #

declare module '@mui/material/InputBase' {
  interface InputBasePropsSizeOverrides {
    large: true;
  }
}

2. 在主题中配置InputBase的样式 #

const theme = createTheme({
  components: {
    MuiInputBase: {
      styleOverrides: {
        root: {
          '&.MuiInputBase-sizeSmall': {
            height: '32px',
          },
          '&.MuiInputBase-sizeMedium': {
            height: '48px',
          },
          '&.MuiInputBase-sizeLarge': {
            height: '56px',
          },
        },
      },
    },
    // 无需额外配置TextField，它会自动把size传递给InputBase
  },
});

这种方式更贴合MUI的设计逻辑，不管是普通TextField还是select类型的TextField，都会继承InputBase的size样式。

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