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

【问题标题】：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？

【问题讨论】：

标签： css reactjs emotion

【解决方案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。