![](/img/trans.png)
[英]Styled-components vs Emotion - How to reapplicate css`style` function on Styled-components
[英]How to extend css emotion styled base components?
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};
`;
但是如果我想潜在地覆盖十个属性,我需要有条件地重用该道具。 这是编写此类功能的惯用方式吗?
您可以使用 @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>
我认为这是覆盖多个属性的正确方法。 例如,如果您有其他固定的属性,例如margin
,您可以执行以下操作来帮助澄清您的“css”文件。
const marginMap = {
sm: '4px',
md: '8px',
lg: '10px',
default: '0',
}
const BaseHeading = styled.header`
margin: ${({ margin = 'default'}) => marginMap[margin]};
`;
您可以将'default'
更改为您的基本主题样式
但是对于您的问题,我还没有看到使用样式系统/样式组件覆盖属性的更好方法
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.