使用 React.js 和 Material-UI 简化样式化的组件媒体查询

Posted

技术标签:

【中文标题】使用 React.js 和 Material-UI 简化样式化的组件媒体查询【英文标题】:Simplifying Styled Component Media Queries using React.js and Material-UI 【发布时间】:2020-02-27 03:27:58 【问题描述】:

我创建了三个函数来处理样式化组件中的媒体查询。一个用于处理min-width 媒体查询,第二个用于处理max-width,第三个用于处理min-widthmax-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】:

我认为您正在尝试重新发明***,而不是仅仅遵循 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],
    ,
  ,
);

【讨论】:

你的断点也关闭了,因为 768 不应该是一个限制,而应该是一个恰好落在 600 到 960 像素之间的“小”范围内的值。

以上是关于使用 React.js 和 Material-UI 简化样式化的组件媒体查询的主要内容,如果未能解决你的问题,请参考以下文章

React.js Material-UI 中的底部导航样式

React.js Material-UI:以编程方式隐藏和显示选项卡

React.js Material-UI:以编程方式从子组件中隐藏父组件选项卡

构建 React.js 应用的十佳 UI 框架,都在这了!

构建 React.js 应用的十佳 UI 框架,都在这了!

10 个打造 React.js App 的最佳 UI 框架