styled-system

Style props for rapid UI development

https://styled-system.com

Channels

Team

How do you responsively style nested elements with styled-system?

October 14, 2020 at 10:03am

Shannen Smyth

@shannen-smyth

How do you responsively style nested elements with styled-system?

October 14, 2020 at 10:03am

I have a Text component which is a styled span and uses a variant to get the fontSize and lineHeight. <span>This is text <img src="exampleurl"/></span>

const getVariantStyle = (scale: number) => {
  return {
    fontSize: [
      fontSizes.small[scale],
      fontSizes.medium[scale],
      fontSizes.large[scale],
    ],
    lineHeight: [
      lineHeights.small[scale],
      lineHeights.medium[scale],
      lineHeights.large[scale],
    ],
  };
};
const StyledText = styled("span")`
  img {
    height: ${[fontSizes.small[2], fontSizes.medium[2], fontSizes.large[3]]};
  }
${variant({
    prop: "type",
    variants: {
      h1: getVariantStyle(7),
      h2: getVariantStyle(6),
      h3: getVariantStyle(5),
      h4: getVariantStyle(4),
      p: getVariantStyle(3),
    },
  })};
`

I want to style the img tag that is inside the span responsively. I have included an example above of my component and attempt to style the height using the styled-system array. This renders the img with the height: 20.827.234. Yet the span renders correctly with font-size: 83px;

Does anyone know how I should update the styling in the image tag to use the responsive array?

styled-system

How do you responsively style nested elements with styled-system?

How do you responsively style nested elements with styled-system?

No messages yet