Material UI 字体大小不响应

Question

我使用材料 UI 组件（例如自动完成框、选项卡和按钮）创建了该网站，但现在我发现这些组件具有响应性，但文本却没有。 例如，我有一个自动完成组件，它会根据宽度的变化而缩小，但字体大小始终保持 14px。

自动完成组件：-

<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 来更新排版字体大小，但没有任何反应，因为我没有使用排版组件，而是使用了诸如选项卡、按钮等组件，所有这些都使用文本。

Answer 1

要具有响应式字体大小，导出时需要将主题包装在

responsiveFontSizes

中。下面是一个例子：

import { createTheme, responsiveFontSizes } from "@mui/material/styles";

const customTheme = createTheme({
  // your theme
  },
});

export default responsiveFontSizes(customTheme);

这将使字体大小在整个应用程序中响应，并且大小将取决于断点。