How to extend css emotion styled base components?

https://codesandbox.io/s/w242n1vonw

I have a project using styled-system and react-emotion.

I have styled headings that inherit from a base css for reusability.

Sometimes I want to be able to overwrite properties using styled system like:

<H1 color='green'/>


It's working and fine when my base component is:

const BaseHeading = ( theme, ...props ) => css`
color: $props.color ? props.color : theme.secondary;
`;


But if I want to potentially override ten properties I need to reuse that props conditional. Is this the idiomatic way to write such functionality?

1 Answer
1

I would consider this the correct way to approach overriding multiple properties. If you have other properties that are fixed like margin for example, you could do something like below to help clarify your "css" file.

margin

const marginMap =
sm: '4px',
md: '8px',
lg: '10px',
default: '0',


const BaseHeading = styled.header`
margin: $( margin = 'default') => marginMap[margin];
`;


You can change 'default' to be your base theme stylings

'default'

But to your question, I haven't seen a better way to overwrite properties using styled system/styled components

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.