Below are the CSS styles I am currently using:
import styled, { css } from "styled-components";
const H4 = css`
font-family: "Futura";
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 140%;
color: #3a786a;
`;
const H3 = css`
font-size: 24px;
`;
const Span = css`
font-size: 16px;
`;
export const Typography = styled.div`
#widgetStyles & {
${(props) => {
switch (props.variant) {
case "h4":
return H4;
case "h3":
return H3;
case "body1":
return Span;
default:
return css`
font-size: 14px;
color: #010101;
`;
}
}}
}
`;
When I use the Typography component with different variants, the Styled-components library generates the same CSS class for each variant. This results in conflicts between the styles.
Here is an example of how I am using the Typography component with different variations:
<Typography variant="h4">{label}</Typography>
<Typography variant="h3">{label}</Typography>
However, despite specifying different variants, the output still displays the same CSS class being applied: