Reusing existing CSS in styled-component

Question

We've a large project that exist of multiple styled components.
But for a next release and design update of that component we'll working together with a new partner that will deliver the styleguide and a CSS file that they are created for our client.

So I'm looking how I can re-use the styles of our partner in a styled component.

Do you think it's a good idea to do something like:

const PrimaryButton = styled(".btn-primary)``.

Instead of:

const PrimaryButton = styled.button``;

Actually, I can not find any working example, thus I think it's not possible... So, does someone know how I can do something like this?

Ehm, and for some reason I want to avoid to have something like this...

<PrimaryButton className="btn-primary"></PrimaryButton>

sgrmhdk · Accepted Answer · 2020-09-02 14:04:57Z

1

You can reuse styled components by extending the styles.

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const PrimaryButton = styled(Button)`
  color: blue;
  border-color: blue;
`;

answered Sep 2, 2020 at 14:04

sgrmhdk

2361 silver badge8 bronze badges

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

1 Comment

bySebastian Over a year ago

Thank you. But some styled-components should re-use an already existing style. Now I did it this way: export const SlideDetails = styled.div.attrs((props) => ({ className: "slide-details", }))' color: #FF0000; ';

Collectives™ on Stack Overflow

Reusing existing CSS in styled-component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related