Css 是否可以使用样式系统'；在样式化组件内设置断点？

我希望在样式化组件中使用样式化系统的断点和大小调整机制

目前，我不得不使用“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

从“React”导入React
从“样式化组件”导入样式化
从“../../theme”导入主题
从“反应介质”导入介质
const StyledImg=styled.img`
边界半径：${props=>（props.size/4）}；
`
功能配置文件图像（道具）{
常量断点=主题。断点[0]
返回
{匹配=>
火柴(
) : (
)
}
}
功能简介卡（道具）{
返回
}
导出默认配置文件映像

是否可以获取当前断点索引？ 我可以这样写吗：

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;
   }
`

const StyledImg=styled.img`
边界半径：${props=>（props.size[theme.currentBreakpointIndex]/4）}；
`
功能配置文件图像（道具）{
返回
}
功能简介卡（道具）{
返回
}
导出默认配置文件映像

阅读他们建议您在查询中插入断点并将其放在主题中。您不能像这样访问它们：

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来改变样式（但在我看来这是应该做的）。

这篇文章可能会有所帮助，感谢Bonnie，这不是我想要的，但它可以解决问题。如果你（真的）想这样做，你需要自己跟踪浏览器的宽度。例如，应用程序组件中的挂钩可以更新全局状态（如redux），并在需要时获取数据（如果是redux，则连接）。事实上，我认为你们不需要那个，边界半径也可以通过媒体查询来调整