如何扩展 CSS 情感风格的基础组件？答案

【问题标题】：How to extend css emotion styled base components?如何扩展 CSS 情感风格的基础组件？
【发布时间】：2019-02-05 22:58:06
【问题描述】：

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};
`;

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

【问题讨论】：

标签： javascript css styled-components emotion

【解决方案1】：

您可以使用 @emotion/styled 中的 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>

【讨论】：

【解决方案2】：

我认为这是覆盖多个属性的正确方法。如果您有其他已修复的属性，例如 margin，您可以执行以下操作来帮助澄清您的“css”文件。

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

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

您可以将'default' 更改为您的基本主题样式

但对于您的问题，我还没有看到使用样式系统/样式组件覆盖属性的更好方法

【讨论】：