Можно ли использовать точки останова Style System внутри Styled-компонента?

Question

Я хотел бы использовать точку останова и механизм определения размеров в стиле системы внутри компонента с элементами стиля.

В настоящее время я должен использовать "реагировать на медиа", что решает мою проблему, но это решение связано с большим количеством дублирования кода. Вот мое текущее решение для установки границы радиуса 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

Answer 1

Читая это, они предлагают вам вводить точки останова в запросы и помещать их в тему. Вы не можете получить к ним доступ следующим образом:

styled.div`
   ${({theme: {mediaQueries: {small}}}) => small} {
       color: red;
   }
`

Однако это решение использует css для изменения стилей (но, на мой взгляд, так и должно быть).