Currently, I am in the process of converting my project from plain CSS to styled components using styled-components. So far, I have successfully converted all of my components except for one. I have looked at various examples on Stack Overflow but none of them quite match what I need.
The component causing me trouble is the InfoBox component, which has conditional class names. My question is: how do I convert the InfoBox component to use styled components? Do I need to inject the styles using a styled-component wrapper or is there another way?
I apologize if there are any mistakes in my English as it is not my native language.
Here is a snippet of my code:
import React from 'react'
import "./InfoBox.css"
function InfoBox({ isRed, active, activetored, ...props }) {
return (
<div onClick={props.onClick}
className={`infoBox ${active && "infoBox--selected"}
${activetored && "infoBox--selectedtored"}
${isRed && "infoBox--red"} `} >
</div>
)
}
export default InfoBoxHere is an example of how the InfoBox component is used in the app:
<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>An example of the CSS styling for the InfoBox component can be seen below (though you can customize this in any way):
.infoBox--selected {
border-top: 10px solid greenyellow;
}
.infoBox--selectedtored {
border-top: 10px solid red;
}
.infoBox--red {
border-color: darkblue;
}