Как я могу использовать точки останова внутри createMuiTheme?Материал UI & React.js - PullRequest
Новая
       28

Как я могу использовать точки останова внутри createMuiTheme?Материал UI & React.js

1 голос
/ 25 апреля 2019

Возможно, не правильный подход, но я хочу создать, например, несколько «глобальных» стилей для заголовков. Примерно так: 

const myTheme = createMuiTheme({
    headings: {
        h1: {
            fontSize: 28,
            // Obviously this does not work...
            [theme.breakpoints.down('sm')]: {
                fontSize: 24
            },
        },
        h2: {
            fontSize: 24,
        }
    }
}

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

const styles = (theme) => ({
    myElement: {
        ...theme.headings.h1,
        // ... other styles
    }
}

Это работает, но проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы заголовки были адаптивными и учитывали точки останова пользовательского интерфейса материала, но я не могу использовать их внутри самой createMuiTheme? Как сделать это правильно, чтобы я мог распространять в своих стилях, ВКЛЮЧАЯ адаптивные стили, все в одном?

1 Ответ

1 голос
/ 30 мая 2019

Вы можете использовать createBreakpoints метод

Пример: 

// theme.js

import createBreakpoints from '@material-ui/core/styles/createBreakpoints'
import { createMuiTheme } from '@material-ui/core/styles'

const breakpoints = createBreakpoints({})

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        [breakpoints.up('md')]: {
          minWidth: '200px',
          backgroundColor: 'yellow',
        },
      },
    },
  },
})

export default theme

(проверено: материал-интерфейс 4.0.1)

...