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 ponent 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?

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 ponent 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?

• javascript
• css
• styled-ponents
• emotion

2 Answers 2

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

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

You can override certain properties of BoldText by creating a new styled ponent 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>

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 ponents