CODEWITHSUNDEEP
reactjsstyled-components
Emi
Emi

Reputation: 5035

Extract class name with styled-components

I'm using a UI library that requires you to pass the class name in a skin prop in order to customise the internals of a component. Something like:

import styles from './ProfileInfoSkins.css';

...

<ProfileInfo skin={{ headline: styles.headline }}

I'm wondering if there is any way to do that by using styled-components and avoid having to create a separate css file.

Upvotes: 1

Views: 1007

Answers (1)

Drew Reese
Drew Reese

Reputation: 202667

.attrs

This is a chainable method that attaches some props to a styled component. The first and only argument is an object that will be merged into the rest of the component's props.

Attaching additional props

const StyledProfileInfo = styled(ProfileInfo).attrs(
  props => ({
    skin: {
      headline: { /* headline style object */ },
      // add whatever other skin object properties needed
    },
  }), 
);

Upvotes: 1

Related Questions