I am attempting to create a styled-component with conditional pseudo-elements, but I am having trouble getting it to work properly. Could someone confirm if the syntax I am using is correct?
For the context: I want to achieve a scenario where if isSelected is true, there will be an additional red-colored border around my div element (a rectangular box that already has a black border).
Any assistance would be greatly appreciated!
const CardContainer = styled.div(
(props) => css`
align-self: center;
margin: auto;
width: 80%;
height: 100%;
background: rgb(222, 222, 222);
border-style: solid;
border-width: 0.1rem;
box-shadow: 4px 4px 8px rgba(183, 183, 183, 0.25);
${props.isSelected &&
css`
&::before {
border-color: red;
border-style: solid;
border-width: 0.1rem;
}
`}
`
);