How to extend css emotion styled base components?

Question

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?

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.

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

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