Early access. Read the blog post

ElementQuery

A utility React component for styling elements based on the width of the parent element.

import {ElementQuery} from '@sanity/ui'
import styled from 'styled-components'

const Responsive = styled.div`
  padding: 10px;

  [data-eq-min~="0"] > & {
    padding: 20px;
  }
  
  [data-eq-min~="1"] > & {
    padding: 30px;
  }
`

function ResponsiveItems () {
  return (
    <ElementQuery>
      <Responsive>foo</Responsive>
      <Responsive>bar</Responsive>
    </ElementQuery>
  )
}
Updated Oct 29, 2020 @ 10:01
By
the platform for structured content