Styled component generate same css class with different conditions

Question

I have these styles:-

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;
          `;
      }
    }}
  }
`;

Whenever i tried calling the Typography component with different variations Styled-components generate same css class. Which creates confliction between styles.

This is how i am calling the above defined component with different variations:-

<Typography variant="h4">{label}</Typography>

<Typography variant="h3">{label}</Typography>

But it generates the output with same class:-

Ahmad · Accepted Answer · 2022-07-06 14:36:33Z

5

Basically styled-components generates different classes but the first class is same and other class are different, as you can see in h4 and h3 tag, could you please change #widgetStyles & to #widgetStyles &&, as you can see the below code.

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;
          `;
      }
    }}
  }
`;

edited Jul 6, 2022 at 14:36

answered Jul 6, 2022 at 13:20

Ahmad

1,5191 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JA9 Over a year ago

nice, good to know. But i can't remove the id as this is needed. This whole thing is a widget and we are wrapping all styles under the #Id widgetStyles so that it wont effect the other styles on the page where it'll be integrated.

Ahmad Over a year ago

Hi @JA9 I have updated the answer, could you please try.

JA9 Over a year ago

nice, this is working now

Collectives™ on Stack Overflow

Styled component generate same css class with different conditions

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related