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

You can create a new custom styled component that extends a different styled component using the styled function from @emotion/styled. Let's say you had a styled component called BoldText.

const BoldText = styled("div")`
  font-size: 16px;
  font-weight: bold;
`;

You can override certain properties of BoldText by creating a new styled component that is built off of BoldText similar to the way BoldText is built off of a div.

import styled from "@emotion/styled";
import BoldText from "./BoldText"

const BigBoldText = styled(BoldText)`
  font-size: 20px;
`

<BoldText>I'm bold and 16px</BoldText>
<BigBoldText>I'm bold and 20px</BigBoldText>

Answer 2

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