javascript - 如何扩展 css 情感风格的基础组件？

Question

https://codesandbox.io/s/w242n1vonw

我有一个使用 styled-system 和 react-emotion 的元素。

为了可重用性，我设计了继承自基础 CSS 的标题样式。

有时我希望能够使用像这样的样式化系统来覆盖属性:

<H1 color='green'/>

当我的基本组件是:

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

但如果我想潜在地覆盖十个属性，我需要有条件地重用该 Prop 。这是编写此类功能的惯用方式吗？

Answer 1

您可以创建一个新的自定义样式组件，使用@emotion/styled 中的样式函数扩展不同样式的组件。假设您有一个名为 BoldText 的样式化组件。

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

您可以通过创建一个基于 BoldText 的新样式组件来覆盖 BoldText 的某些属性，类似于 BoldText 从 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>