CODEWITHSUNDEEP
cssreactjsstyled-components
shawn
shawn

Reputation: 196

How to reuse styled components with different base element?

I am making some text components, and I want them all to have the same basic CSS, but with different font-sizes and different HTML elements. Right now I have something like this:

const Title = styled.h2`
  font-size: 24px;
  color: black;
  font-weight: 500;
`;

const Subtitle = styled.h4`
  font-size: 20px;
  color: black;
  font-weight: 500;
`;

const Body = styled.p`
  font-size: 16px;
  color: black;
  font-weight: 500;
`;

I'd like to be able to set the color and font-weight for all three in one place, but have the font-size and HTML element remain separate. How can I do this with styled-components?

Upvotes: 1

Views: 354

Answers (1)

Ben
Ben

Reputation: 668

createGlobalStyle might help you, please refer to the styled-components docs.

const GlobalStyle = createGlobalStyle`
  body {
    --fontWeight: 500;
    --color: black;
  }
`

Then for your other styled-components which will be used in the app you can use it as follows:

const Title = styled.h2`
  font-size: 24px;
  color: var(--color);
  font-weight: var(--fontWeight);
`;

const Subtitle = styled.h4`
  font-size: 20px;
  color: var(--color);
  font-weight: var(--fontWeight);
`;

const Body = styled.p`
  font-size: 16px;
  color: var(--color);
  font-weight: var(--fontWeight);
`;

More about CSS custom properties can be found here.

Upvotes: 1

Related Questions