отзывчивый материал muiFontSizes не обрабатывает body2 - PullRequest
Новая
       55

отзывчивый материал muiFontSizes не обрабатывает body2

0 голосов
/ 16 июня 2020

Попытка создать адаптивный макет, который изменяет размер шрифта в зависимости от размера экрана. Я использую Material-ui и обнаружил в документации следующее: https://material-ui.com/customization/theming/#responsivefontsizes -theme-options-theme

Кажется, он отлично работает на моем variant='h4' из <Typography>, но ничего не делает для variant='body2'.

Согласно документации, вы можете передать следующую опцию:

варианты (Массив [необязательно]): по умолчанию все. Варианты типографики для обработки.

Как уже говорилось, по умолчанию все, но я попытался передать объект, чтобы вручную выбрать варианты. variants: ['h4', 'body2'] Результат тот же, работает на h4, а не на body2.

вот какой-то код

в моем индексе. 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: я знаю, что код выглядит неаккуратно, я новичок в материалах, но все еще играюсь и выясняю, как все работает :) и если вы прочитаете до конца В конце этого поста я sh удачного вам дня! спасибо

...