Utilizing the styled-components library, I have enhanced the header components from the Blueprintjs library. The current template for the H6 component appears as follows:
export const DH6 = styled(H6)`
color: ${(props) => (props.white ? "white" : null)};
display: ${(props) => (props.flex ? "flex" : null)};
opacity: ${(props) => (props.opaque ? 0.7 : null)};
font-weight: ${(props) => (props.heavy ? 500 : 300)};
text-align: ${(props) => (props.center ? "center" : null)};
font-style: ${(props) => (props.italics ? "italic" : null)};
text-decoration: ${(props) => (props.underline ? "underline" : null)};
`;
The above code functions correctly. Now, I aim to apply the same properties from D1 to D5. Instead of duplicating the props, is there a way to accomplish this more efficiently in a DRY manner? I attempted saving the properties to a variable but faced challenges:
const generalProps = {
opacity: ${(props) => (props.opaque ? 0.7 : null)},
color: ${(props) => (props.white ? "white" : null)},
display: ${(props) => (props.flex ? "flex" : null)},
font-weight: ${(props) => (props.heavy ? 500 : 300)},
text-align: ${(props) => (props.center ? "center" : null)},
font-style: ${(props) => (props.italics ? "italic" : null)},
text-decoration: ${(props) => (props.underline ? "underline" : null)}
}
export const DH6 = styled(H6)`
{...generalProps}
`;
Is it possible to assign props using variables within styled-components?