// 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>;