menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

styled-system

Style props for rapid UI development

Channels
Team

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

October 14, 2020 at 10:03am

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?
No messages yet