[英]How do I get a variable from a graphQl query into a pseudo element in either inline styles or styled components
I have a bit of a condrum I can't seem to solve I am querying colors from a graphQL database from DatoCMS and want to change the color of a Pseudo element in my Gatsby js app I can do so just fine like this with a regular selector我有一个难题我似乎无法解决我正在从 DatoCMS 的 graphQL 数据库中查询颜色并想更改我的 Gatsby js 应用程序中伪元素的颜色我可以像这样使用常规选择器
<p style={{color: pricing.packageBorderColor.hex}} className="price-session">
<span>${pricing.priceAmount}</span> | <span>{pricing.lengthOfSession}</span>
</p>
However I am not sure how to introduce sudo selector like :after
into the mix.但是,我不确定如何将: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;
}
`
I have thought maybe styled components and This works, however I then Can't add my variables because styled components seems to live outside there scope before my loop and react component.我曾想过样式组件可能有效,但是我无法添加我的变量,因为样式组件似乎在我的循环和反应组件之前存在于该范围之外。
Updated Attempt更新尝试
const CircleSave = styled.div`
&:after{
background: ({color}) => color
}
`
<CircleSave color={pricing.packageBorderColor.hex} className="circle-save">
<p>${pricing.packageSavings}</p>
<p>savings</p>
</CircleSave>
I get the following error in my rendered css我在渲染的 css 中收到以下错误
.chrVyZ:after {
background: ({color}) => color;
}
You can use styled components passed props to pass props like this:您可以使用样式化组件传递道具来传递道具,如下所示:
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;
}
`
and then use it like normal component with a color prop:然后像使用颜色道具的普通组件一样使用它:
<ListItem color={pricing.packageBorderColor.hex}/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.