css - mui 材料 responsiveFontSizes 不处理 body2

Question

尝试创建一个响应式布局，根据屏幕大小更改字体大小。我正在使用 Material-ui 并在文档中找到以下内容： https ://material-ui.com/customization/theming/#responsivefontsizes-theme-options-theme

它似乎在我variant='h4'的<Typography>组件上工作正常，但对variant='body2'.

根据文档，您可以传入以下选项：

变体（数组 [可选]）：默认为全部。要处理的排版变体。

如前所述，默认值是全部，但我尝试传递一个对象来手动选择变体。variants: ['h4', 'body2']结果是一样的，适用于 h4，而不是 body2。

这是一些代码

在我的 index.js 中：

theme = responsiveFontSizes(theme, { factor: 5, variants: ['h4', 'body2']});

ReactDOM.render(
    <React.StrictMode>
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <App />
        </ThemeProvider>
    </React.StrictMode>,
    document.getElementById('root'),
);

来自 app.js

{/* title */}
<Grid item xs={11}>
  <Typography variant='h4' align='center' className={classes.title}>
    {'Valentin Harapu. WebDev.'}
  </Typography>
</Grid>
{/* card(s) */}
<Grid item xs={11} sm={6} md={4}>
  <Card variant='elevation' elevation={3}>
    <CardContent>
      <Typography variant='body2' component='p'>
        well meaning and kindly.
        <br />
        {'"a benevolent smile"'}
      </Typography>
    </CardContent>
    <CardActions>
      <Button size='small' variant='outlined'>
        Learn More
      </Button>
    </CardActions>
  </Card>
</Grid>

PS：我知道代码看起来很乱，我对材料很陌生，仍然在玩弄东西并弄清楚东西是如何工作的:) 如果你一直阅读到这篇文章的底部，我祝你有个美好的一天！谢谢你

标签： cssfunctionmaterial-uithemestypography