使用 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-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】:我认为您正在尝试重新发明***,而不是仅仅遵循 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:以编程方式隐藏和显示选项卡