How do I get a variable from a graphQl query into a pseudo element in either inline styles or styled components

Anders Kitson

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

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

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

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

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}/>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Styled Components - Inline styling overlaps the media query styles

How to do overlapping styles with Styled Components React?

How do I pass a variable/literal for a value in styled components?

How to write a conditional css pseudo-element with styled-components?

Change inline styles to styled-components

How do I use GlobalStyles from styled components in next?

Can I set styles to document body from styled-components?

Styled components using pseudo element :checked

Reusable styled components (pseudo element) with logic

React styled-components - How to render styles based on prop condition or pseudo class?

For styled components, how can I make all component styles cascade to .hover component styles?

GraphQL - How do I use the return value as a variable for the next query?

How do I skip a query if the variable is null in GraphQL?

How to create shared styles using styled components?

How do I clear all styles from a child element?

How do i get a variable from an inline js script in html and put it into an external .js file?

Styled components not applying styles

How do i create a loop in jsx from a graphql query data?

How to get the calculated pseudo from jsx in scss styles?

How do I set a option to selected using styled-components?

How do I correctly use 'styled-components'?

How do I stick to the button right in header using styled components?

How can i do multiple onClick animations in Styled components?

How do I turn this CSS code into Styled-Components?

How can I get syntax highlighting for styled components template literals?

styled-components: extend styles and change element type

How to apply styles to multiple components using styled components

In styled components, how can I give different styles for each platform and device?

How to get props from parent in React Styled Components