Упрощение стилизованных компонентных медиазапросов с использованием React.js и Material-UI - PullRequest
Новая
       35

Упрощение стилизованных компонентных медиазапросов с использованием React.js и Material-UI

1 голос
/ 31 октября 2019

Я создал три функции для обработки медиа-запросов в Styled Components. Один для обработки min-width медиазапросов, второй для max-width и третий для min-width и max-width запросов.

Вот они: 

const breakpoints = {
  tablet: 768,
  desktop: 1024,
  widescreen: 1216,
  fullhd: 1408
}

const breakpointsKeys = Object.keys(breakpoints)

const media = Object.keys(breakpoints).reduce((obj, query) => {
  let queryUnit

  if (typeof mediaQueryUnit !== 'undefined') {
    queryUnit = mediaQueryUnit
  } else {
    queryUnit = 'px'
  }
  obj[query] = (...styles) => css`
    @media (min-width: ${breakpoints[query] + queryUnit}) {
      ${css(...styles)}
    }
  `
  return obj
}, {})



const mediaDown = Object.keys(breakpoints).reduce((obj, query) => {
  let queryUnit

  if (typeof mediaQueryUnit !== 'undefined') {
    queryUnit = mediaQueryUnit
  } else {
    queryUnit = 'px'
  }
  obj[query] = (...styles) => css`
    @media (max-width: ${breakpoints[query] - 1 + queryUnit}) {
      ${css(...styles)}
    }
  `
  return obj
}, {})

const mediaOnly = Object.keys(breakpoints).reduce((obj, query, index) => {
  let nextIndex = breakpointsKeys.indexOf(query) + 1
  let nextIndexQuery = breakpointsKeys[nextIndex]
  let maxQuery = breakpoints[nextIndexQuery]

  let queryUnit

  if (typeof mediaQueryUnit !== 'undefined') {
    queryUnit = mediaQueryUnit
  } else {
    queryUnit = 'px'
  }
  obj[query] = (...styles) =>
    maxQuery &&
    css`
      @media (min-width: ${breakpoints[query] +
          queryUnit}) and (max-width: ${maxQuery + queryUnit}) {
        ${css(...styles)}
      }
    `
  return obj
}, {})

ИВот как я использую их в стилизованном компоненте: 

const Button = styled.div(
  ({
    tablet,
    tabletDown,
    tabletOnly,
  }) => css`

    ${media.tablet`
      background: blue;
   `}

   ${media.tabletDown`
     background: yellow;
   `}

   ${media.tabletOnly`
     background: green;
   `}
  `
)

Я хотел бы объединить эти три функции в одну функцию. Затем я мог бы использовать это так: 

${media.down.tablet`
  background-color: yellow;
`}

Или какой-то похожий синтаксис. Сейчас я не так беспокоюсь о синтаксисе, как о наличии одной функции, а не трех.

Любые идеи о том, как это сделать?

Спасибо (заранее) за любую помощьВы можете предложить.

1 Ответ

0 голосов
/ 31 октября 2019

Я думаю, что вы пытаетесь заново изобрести колесо, а не просто следовать существующей функциональности из Material-UI: https://material -ui.com / customization / breakpoints / 

const styles = theme => ({
  root: {
    padding: theme.spacing(1),
    [theme.breakpoints.down('sm')]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up('md')]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up('lg')]: {
      backgroundColor: green[500],
    },
  },
});
...