// Note the $ prefix in the prop name 👇 const StyledToggleButton = styled(ToggleButton)<{ $hasMargin?: boolean }>` && { color: red; // Just use the prop as normal ${(props) => props.$hasMargin && css` margin: 10px; `} } `; <StyledToggleButton value={""} size={"small"} {/* Assign the prop as normal */} $hasMargin={true} > click </StyledToggleButton>;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter