Material UI组件字体大小不响应问题求助

使用Material UI的Autocomplete、Tabs、Buttons等组件搭建网站时，发现组件本身具备响应式特性，但文字大小无法自适应。例如Autocomplete组件会随宽度变化收缩，但字体大小始终保持14px。

Autocomplete组件代码如下：

<Autocomplete
  disablePortal
  defaultValue={"xyz"}
  options={symbols}
  sx={{ width: 300 }}
  onChange={handleChange}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Symbols"
      inputProps={{
        ...params.inputProps,
        value: (params.inputProps.value || "").toUpperCase(),
      }}
    />
  )}
/>

尝试过通过ThemeProvider修改排版字体大小，但因未使用Typography组件，而是直接使用Tabs、Buttons等带文字的组件，所以没有效果。请问如何让这些组件的文字也实现响应式？

方法1：通过sx属性结合媒体查询直接设置组件文字大小 #

针对单个组件，在sx中根据屏幕尺寸定义字体大小，以Autocomplete为例：

<Autocomplete
  disablePortal
  defaultValue={"xyz"}
  options={symbols}
  sx={{ 
    width: 300,
    // 配置输入框文字响应式大小
    '& .MuiInputBase-input': {
      fontSize: { xs: '12px', sm: '14px', md: '16px' }
    },
    // 配置标签文字响应式大小
    '& .MuiInputLabel-root': {
      fontSize: { xs: '11px', sm: '13px', md: '15px' }
    }
  }}
  onChange={handleChange}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Symbols"
      inputProps={{
        ...params.inputProps,
        value: (params.inputProps.value || "").toUpperCase(),
      }}
    />
  )}
/>

Tabs、Buttons组件同理，通过sx选中对应的文字类名（比如Button的.MuiButton-root，Tabs的.MuiTab-root），结合响应式断点设置字体大小。

方法2：自定义主题全局覆盖组件文字样式 #

如果需要全局统一设置，在自定义主题中针对各组件的样式进行响应式配置：

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

const theme = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          fontSize: { xs: '12px', sm: '14px', md: '16px' }
        }
      }
    },
    MuiTab: {
      styleOverrides: {
        root: {
          fontSize: { xs: '11px', sm: '13px', md: '15px' }
        }
      }
    },
    MuiInputBase: {
      styleOverrides: {
        input: {
          fontSize: { xs: '12px', sm: '14px', md: '16px' }
        }
      }
    },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          fontSize: { xs: '11px', sm: '13px', md: '15px' }
        }
      }
    }
  }
});

// 在根组件外层包裹ThemeProvider
function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的组件内容 */}
    </ThemeProvider>
  );
}

这种方式能一次性给所有同类型组件设置响应式字体，无需逐个组件修改。

方法3：使用Typography组件包裹组件内文字（可选） #

如果部分组件支持自定义文字渲染（比如Button的children、Tab的label），可以用Typography组件包裹，利用其响应式字体属性：

<Button>
  <Typography fontSize={{ xs: '12px', sm: '14px', md: '16px' }}>
    提交
  </Typography>
</Button>

这种方式适合需要精细化控制单个组件文字的场景。

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