After transitioning from active classes to passing props to styled components, I encountered a minor issue. The prop passing is functioning correctly, but there seems to be an issue with the CSS.
Prior to switching to props, this section worked flawlessly:
.element.is-active + .element:before {}
In the version using styled components and props, I expected it to look like this:
const Component = styled.div<IComponent>`
${({ isActive }) =>
isActive
? `
+ &:before {
content: none;
}
`
: ''}
}
I also tried an alternative approach, but unfortunately neither method is producing the desired result:
+ &:before {
content: ${({ isActive }) => isActive ? 'none' : ''};
}