如何将graphQl查询中的变量转换为内联样式或样式组件中的伪元素

Posted 2023-03-15

【中文标题】如何将graphQl查询中的变量转换为内联样式或样式组件中的伪元素

【英文标题】：How do I get a variable from a graphQl query into a pseudo element in either inline styles or styled components

【发布时间】：2020-04-06 09:56:57

【问题描述】：

我有一个似乎无法解决的难题 我可以像这样使用常规选择器做到这一点

<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;

【参考方案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/>

【讨论】：

我试过你的代码，我一定是做错了什么，我用我的尝试更新了我上面的代码，以及我在检查模式下遇到的 css 错误。谢谢

忘记添加内联字符串模板。应该是这样的color: $( color ) => color;。我已经更新了我的答案。