React Style To Css ???

[xyzdata]

Css To React

CssToReact

http://staxmanade.com/CssToReact/

how to fixed this bug ???

.sidebar-btn::after {
    color: #0f0;
    background: #000;
    width: 20px;
    margin: auto 5px;
    height: 50px;
    content: 'B';
    position: absolute;
    left: 240px;
    top: 35%;
    cursor: pointer;
}

{
  "sidebar_btn__after": {
    "color": "#0f0",
    "background": "#000",
    "width": "20px",
    "margin": "auto 5px",
    "height": "50px",
    "content": "'B'",
    "position": "absolute",
    "left": "240px",
    "top": "35%",
    "cursor": "pointer"
  }
}

React To Css

???

http://reactcss.com/

[xyzdata]

how to add an event listener to a CSS Pseudo-element ???

stackoverflow

https://stackoverflow.com/q/9395858/8202629

https://stackoverflow.com/questions/5598675/javascript-find-pseudo-elements

getComputedStyle

$('*').filter(function(){return getComputedStyle(this, ':before').length != 0});

getComputedStyle & getDefaultComputedStyle

let style = window.getComputedStyle(element, [pseudoElt]);

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSview-getComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getDefaultComputedStyle

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getDefaultComputedStyle

https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value

computed_value

let elem1 = document.getElementById("elemId");
let style = window.getComputedStyle(elem1, null);

// 它等价于
// let style = document.defaultView.getComputedStyle(elem1, null);

<style>
    #elem-container{
        position: absolute;
        left:     100px;
        top:      200px;
        height:   100px;
    }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
    function getTheStyle(){
        let elem = document.getElementById("elem-container");
        let theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
        document.getElementById("output").innerHTML = theCSSprop;
    }
    getTheStyle();
</script>

event delegation

https://javascript.info/event-delegation

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

jquery

https://learn.jquery.com/events/event-delegation/

[xyzdata]

https://stackoverflow.com/questions/5598675/javascript-find-pseudo-elements

Pseudo-element & getComputedStyle

https://stackoverflow.com/questions/44342065/how-to-get-a-dom-elements-before-content-with-javscript

let v_dom = document.querySelector(".javascript"), ":before").getPropertyValue("background-image");

getComputedStyle(v_dom);

[staxmanade]

@xgqfrms-gildata - not quite following what the issue/ask is for this item? Can you elaborate a bit more?

[yanckst]

@staxmanade I think the original issue is...

This is your CSS class :

.sidebar-btn::after {
    color: #0f0;
    background: #000;
    width: 20px;
    margin: auto 5px;
    height: 50px;
    content: 'B';
    position: absolute;
    left: 240px;
    top: 35%;
    cursor: pointer;
}

This is the output from your conversion:

"sidebar_btn__after": {
    "color": "#0f0",
    "background": "#000",
    "width": "20px",
    "margin": "auto 5px",
    "height": "50px",
    "content": "'B'",
    "position": "absolute",
    "left": "240px",
    "top": "35%",
    "cursor": "pointer"
  }

Correct me if I'm wrong, but I think it should be something like :

"sidebar_btn": {
    //Some Style,

    "&:after": {
        "color": "#0f0",
        "background": "#000",
        "width": "20px",
        "margin": "auto 5px",
        "height": "50px",
        "content": "'B'",
        "position": "absolute",
        "left": "240px",
        "top": "35%",
        "cursor": "pointer"
    }
  }

I'm not an expect, but I know if you have a JSSProperty, you can put a string containing an additional rule. For example, a container that will have a CSS on hover

container: {
    //Some style...

    "&:hover": {
        //Some other style
    }

I think the conversion is wrong, because it doesn't nest rules such as hover, after, etc inside the object itself, but creates a class name with this rule. There's a big difference.

[xyzdata]

@xgqfrms-gildata - not quite following what the issue/ask is for this item? Can you elaborate a bit more?

Sorry for that confused description.

wanted

just keep the :: Pseudo-elements selector

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Pseudo-elements

.sidebar-btn::after => .sidebar-btn::after

error result

.sidebar-btn::after => .sidebar_btn__after

[xyzdata]

https://github.com/xgqfrms-GitHub/Sass/tree/master/Tutorial#%E4%BC%AA%E7%B1%BB-hover-%E4%BC%AA%E5%85%83%E7%B4%A0before--after

[xyzdata]

[staxmanade]

Can you explain why/how this is used in a react app? It's my understanding that pseudo selectors are not supported at the element level so I'm not sure I understand what this change would mean if we did make it...