With pure HTML/CSS, I can achieve the following:
<div color="red">
red
</div>
<div color="yellow">
yellow
</div>
div[color="red"] {
color: red;
}
div[color="yellow"] {
color: yellow;
}
However, when using React and TypeScript, I aim to accomplish something like this:
const Colored = ({ color }: { color: "yellow" | "red" ) => (
<div color={color}>
{ color }
</div>
);
But unfortunately, I cannot add arbitrary props to the div element!
So instead, we could achieve the same result by using:
<Colored color="red" />
<Colored color="yellow" />
Is there a way to achieve this in React, or should I consider a different approach altogether?