使用 styled-components 时，如何将我的样式与元素上现有的 css 合并？

Question

我正在尝试使用 transform:translateX(...); css 属性设置组件的样式。但是，现有组件已经使用 transform:transform();，因此我的样式只是覆盖现有的 transform 属性。我想做的是读取元素上现有的翻译数据，这样我就可以简单地将我的翻译量添加到已有的数据中。我理想的解决方案看起来像这样：

const Element = ...

const StyledElement = styled(Element)`
  transform: translateX(${currentTranslate.x - 5});
`

问题是，如何从底层组件读取现有样式？

我的具体用例

（对于那些感兴趣的人）

我正在设计样式的元素是工具提示来自reactstrap，它使用transform:translate(...position of target);定位。我试图让工具提示弹起一点，给它一些生命，所以我使用：

This code to add animation

const horizontalDoubleBounce = keyframes`
  0% {
      left: 0;
  }

  20% {
      left: -5px;
  }

  40% {
      left: 0;
  }

  60% {
      left: -5px;
  }

  80% {
      left: 0;
  }

  100% {
      left: 0;
  }
`

const SpotlightTooltip = styled(Tooltip)`
  animation: ${horizontalDoubleBounce} 1000ms ease-in infinite;
`

我求助于使用 left 属性，该属性有效，因为它不会覆盖任何内容，但我宁愿使用 transform:translate() 来获得更流畅的动画。

Answer 1

您必须在组件外部读取 currentTranslate 并将其值作为 prop 传递给您的样式组件。

const Element = (props) => {
 const currentTranslate = window.scrollY // for example
 // ...

 return <StyledElement currentTranslate={currentTranslate}>
}

样式化的组件将如下所示：

const StyledElement = styled(Element)`
  transform: ${({currentTranslate}) => `translateX(${currentTranslate - 5})`};
`