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

Issue

This Content is from Stack Overflow. Question asked by setting

Here is my case:
I want to get calculated pseudo props – content from jsx to scss.

this.state = { content: 'my after pseudo content' }

the content will be changed during the progress.

And here is my render body:

return <label className={cls('MyTestComponent')}>my test label</label>

And here is my scss file

// MyTestComponent.scss
.MyTestComponent { &:after {
   content: ''
}}

what I want is to get calculated ‘:after’ content from state to the scss file.

I’m using scss and don’t want to import styled-component or other third party package.

What is the best way to do this? Thanks in advance for anyone who can solve this problem:)



Solution

You can use a data attribute in combination with css attr, like so:

return <label 
  className={cls('MyTestComponent')} 
  data-content={this.state.content}
>
    my test label
</label>
.MyTestComponent { &:after {
   content: attr(data-content);
}}


This Question was asked in StackOverflow by setting and Answered by Toggle It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?