如何从内嵌样式或样式化组件中的graphQl查询中获取变量到伪元素中

Question

我有点困惑，似乎无法解决，我在从DatoCMS的graphQL数据库中查询颜色，并想在我的Gatsby js应用程序中更改伪元素的颜色。我可以使用常规选择器来做到这一点]

<p style={{color: pricing.packageBorderColor.hex}} className="price-session">
   <span>${pricing.priceAmount}</span> | <span>{pricing.lengthOfSession}</span>
</p>

但是我不确定如何将像:after这样的sudo选择器引入混合。

const ListItem = styled.li`
  list-style-type: none;
  font-size: 20px;
  display: inline-block;
  width: 330px;
  &:before {
    content: url(data:image/svg+xml,${encodeURIComponent(renderToString(<FontAwesomeIcon icon={faCheck} />))});
    width: 20px;
    display: block;
    float: left;
    position: absolute;
    margin-left: -31px;
    color: {pricing.packageBorderColor.hex} // This is what I'd ideally like to do, but doesnt seem doable
  }
  span{
    display:block;
    float:left; 
    margin-top:3px;
  }
`

[我曾经考虑过样式化的组件可能会起作用，但是后来我无法添加变量，因为样式化的组件似乎在我的循环和反应组件之前就不在该范围之内。

更新尝试

const CircleSave = styled.div`
  &:after{
    background: ({color}) => color
  }

`

<CircleSave color={pricing.packageBorderColor.hex} className="circle-save">
   <p>${pricing.packageSavings}</p>
   <p>savings</p>
 </CircleSave>

我在渲染的CSS中遇到以下错误

.chrVyZ:after {
    background: ({color}) => color;
}

Answer 1

您可以使用styled components passed props这样传递道具：

const ListItem = styled.li`
  list-style-type: none;
  font-size: 20px;
  display: inline-block;
  width: 330px;
  &:before {
    content: url(data:image/svg+xml,${encodeURIComponent(renderToString(<FontAwesomeIcon icon={faCheck} />))});
    width: 20px;
    display: block;
    float: left;
    position: absolute;
    margin-left: -31px;
    color: ${({ color }) => color}; // This is what I'd ideally like to do, but doesnt seem doable
  }
  span{
    display:block;
    float:left; 
    margin-top:3px;
  }
`

然后像带有颜色道具的普通组件一样使用它：

<ListItem color={pricing.packageBorderColor.hex}/>