Как установить точки останова при переопределении переменных темы в createMuiTheme

Question

Я пытаюсь установить размеры шрифта типографии темы по умолчанию для изменения в зависимости от точек останова. Например, когда точка останова имеет значение {xs}, измените theme.typography.h4.fontSize на «1.5rem». На всех других точках останова оставьте значение по умолчанию ('2.125rem').

Я могу легко сделать это в компонентах, используя следующий пример кода:

const useStyles = makeStyles(theme => ({
    title: {
        [theme.breakpoints.down('xs')]: {
            fontSize: '1.5rem',
        }
    },
}))

Однако это означает, что необходимо добавлять один и тот же код к каждому отдельному компоненту, в котором есть <Typography variant='h4'>. Если я решу изменить значение с «1.5rem» на «1.25rem», мне нужно будет найти каждый экземпляр <Typography variant='h4'> и изменить его вручную.

Есть ли способ добавить точки останова для createMuiTheme, чтобы они применялись ко всем экземплярам?

Я попытался сделать следующее: не работает:

const defaultTheme = createMuiTheme()

const theme = createMuiTheme({
    typography: {
        h4: {
            [defaultTheme.breakpoints.down('xs')]: {
                fontSize: '1.5rem'
            }
        }
    }
})

Answer 1

ИСПРАВЛЕНИЕ : Первоначально я указывал, что ваше решение не работает, потому что вы использовали невозможное условие, но я ошибался."down" от xs включает xs, поэтому он делает то, что вы хотели (соответствует 0px до 600px).

Я не уверен, что я сделал в своем первоначальном тестировании, которое сбило меня с толку, но одна вещьЭто может вызвать путаницу, если у вас есть несколько порогов down.В моем собственном тестировании мне было легче избежать стрельбы себе в ногу (например, имея breakpoints.down("xs"), а затем более позднюю breakpoints.down("sm"), которая превзошла настройки "xs"), используя breakpoints.only.

С https://material -ui.com / раскладка / точки останова / # точки останова

• xs, очень маленький: 0px или больше
• см, маленький: 600px или больше

Вот обновленная песочница, которая немного яснее показывает, что происходит: