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

setting 0
Viewed 15

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:)

css-selectors sass reactjs css
1 Answers

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);
}}
Toggle0
Related