My goal is to dynamically render a Styled Component. In the past, it was simple because all styling was contained within the component itself. However, I now strive to maintain a separation of concerns by storing the CSS in an external file. While this approach works well for most cases, I am facing a challenge when trying to dynamically change the font color based on props. Despite my efforts to find a solution, I have not been successful.
Below is the component that requires dynamic font color:
<Styled.HeroHeadline as="h4">
{parse(el.header)}
</Styled.HeroHeadline>
And here is the styles file where I define the CSS:
export const HeroHeadline = styled(Heading)`
p,
div,
span,
h4,
h3 {
display: block;
color: {dynamicProp}
@media (min-width: 992px) {
font-size: var(--font-size-h1);
letter-spacing: var(--letter-spacing-100);
line-height: var(--line-height-h1);
margin: 0;
text-align: center;
}
}
`
If anyone has any insights or suggestions, I would greatly appreciate it. Thank you!
I attempted to find a way to store the prop value in the external CSS file but encountered difficulties in doing so.
I also conducted a search to see if others had faced similar challenges but came up empty-handed.