如何使用情感风格扩展风格？

Posted 2023-03-15

【中文标题】如何使用情感风格扩展风格？

【英文标题】：How to extend style using emotion-styled?

【发布时间】：2021-10-25 05:38:37

【问题描述】：

我想使用情感将样式传递给两个样式化的组件。

我试过这样，但是 $commonStyle 没有继承到 styled.a 和 styled.span：

const commonStyle = css`
  color: #000;
  font-size: 1.6rem;
`;

const commonLink = styled.a`
  $commonStyle
`;

const whiteLink = styled.span`
  $commonStyle
  color: #fff;
`;

如何使用情感扩展 css？

【参考方案1】：

我遇到了一个解决方案。不要继承 commonStyle 作为 commonLink 和 whiteLink 中的第一个属性，而是将其作为 commonLink 的最后一个属性继承> 和 whiteLink。

看下面的代码，我将 commonStyle 样式继承到 Child 组件中并且它工作正常。

import styled from '@emotion/styled'
import css from '@emotion/css'

const commonStyle = css`
color: purple;
`
const Child = styled.div`
font-size: 1.6rem;
$commonStyle

`

const Parent = styled.div`
  $Child 
    color: green;
  
`

render(
  <div>
    <Parent>
      <Child>Green</Child>
    </Parent>
    <Child>Purple</Child>
  </div>
)

【讨论】：

谢谢，但它对我不起作用。你的嵌套样式也返回了Component selectors can only be used in conjunction with @emotion/babel-plugin.的错误我正在使用emotion v11。