[英]Is it possible to use Style System's breakpoints inside a Styled-Component?
我想在样式组件中使用样式系统的断点和大小调整机制。
目前,我必须使用'react-media',它解决了我的问题,但是这个解决方案带有大量的代码重复。 这是我当前根据屏幕大小设置 StyledComponent 的边框半径的解决方案:
import React from 'react'
import styled from 'styled-components'
import theme from '../../theme'
import Media from 'react-media'
const StyledImg = styled.img`
border-radius: ${props => (props.size / 4)};
`
function ProfileImage (props) {
const breakpoint = theme.breakpoints[0]
return <Media query={`(min-width: ${breakpoint})`}>
{matches =>
matches ? (
<StyledImg size={props.size[1]} src={props.src} />
) : (
<StyledImg size={props.size[0]} src={props.src} />
)
}
</Media>
}
function ProfileCard (props) {
return <Box bg='grey' width={1}>
<ProfileImage width={[10, 20]} src={props.src}>
</Box>
}
export default ProfileImage
是否可以获取当前断点索引? 我可以写这样的东西吗:
const StyledImg = styled.img`
border-radius: ${props => (props.size[theme.currentBreakpointIndex] / 4)};
`
function ProfileImage (props) {
return <StyledImg {...props} />
}
function ProfileCard (props) {
return <Box bg='grey' width={1}>
<ProfileImage size={[10, 20]} src={props.src}>
</Box>
}
export default ProfileImage
阅读本文,他们建议您将断点注入查询并将它们放在主题中。 然后你不能像这样访问它们:
styled.div`
${({theme: {mediaQueries: {small}}}) => small} {
color: red;
}
`
但是,此解决方案使用 css 来更改样式(但在我看来,应该这样做)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.