CODEWITHSUNDEEP
reactjsstyled-components
jeanpaul62
jeanpaul62

Reputation: 10581

styled-components: styled custom component, with some props

I have a <Header /> component, which takes a size prop. I want to take a Header with a size prop, and additionally style it with styled-components.

Something like the following, but this obviously doesn't work.

const MyHeader = styled(<Header size="huge />)`
  margin-top: 2rem;
`

Any ideas how to achieve that?

Upvotes: 0

Views: 725

Answers (1)

Colin Ricardo
Colin Ricardo

Reputation: 17269

You can do: 

const MyHeader = styled(Header)({ ... });

For example: 

const MyHeader = styled(Header)`
  color: red;
`

Or if you want: 

const Temp = () => <Header size="huge" />;
const MyHeader = styled(Header)({ ... });

Upvotes: 1

Related Questions