Currently, I am in the process of converting my project from using regular CSS to styled components (https://styled-components.com/). So far, I have successfully converted all my other components except for one that I'm having trouble with. I've looked at examples on Stack Overflow, but nothing quite matches my scenario. I am dealing with conditional class names.
My main question is how to convert the InfoBox component to utilize styled components. The issue lies with the 'className' attribute which is proving to be a bit tricky to translate into a styled component. Do you have any ideas on how to approach this?
English is not my native language so there may be mistakes.
Here is a snippet of my code:
import React from 'react'
import "./InfoBox.css"
import { Card } from "@material-ui/core"
function InfoBox({ isRed, active, activetored, ...props }) {
return (
<Card onClick={props.onClick}
className={`infoBox ${active && "infoBox--selected"}
${activetored && "infoBox--selectedtored"}
${isRed && "infoBox--red"} `} >
</Card>
)
}
export default InfoBox<div className="app__stats">
<InfoBox
isRed
active={typeofCase === "cases"}
onClick={(e) => setTypeofCase('cases')}
/>
<InfoBox
isGreen
active={typeofCase === "recovered"}
onClick={(e) => setTypeofCase('recovered')}
/>
<InfoBox
isRed
activetored={typeofCase === "deaths"}
onClick={(e) => setTypeofCase('deaths')}
/>
</div>The CSS structure looks something like this (you can adjust as needed):
.infoBox--selected {
border-top: 10px solid greenyellow;
}
.infoBox--selectedtored {
border-top: 10px solid red;
}
.infoBox--red {
border-color: darkblue;
}