I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below:
const buttonFont = {
fontFamily: "Chilanka"
};
// define basic text styling
const Text = styled.div`
${typography}
${color}
`;
// create button component
const Button = ({ children, ...rest }) => {
return (
<Text as="button" {...buttonFont } {...rest}>
{children}
</Text>
);
};
// style button using custom styles
const StyledButton = styled(Button)`
color: white;
background-color: gray;
padding: 10px 20px;
border: 2px solid black;
`;
// Issue arises with inheriting styles when changing tag to label
const StyledLabel = styled(StyledButton).attrs({
as: "label"
})``;
The goal is to have a StyledLabel component that inherits all styles from StyledButton, but switches the HTML tag to label. However, when using the "as" attribute, the StyledLabel does not retain the buttonFont styles.
To see a live demonstration, please visit the following link: demo