Skip to content

Better support for CSS in React.

Greg Sidelnikov edited this page Apr 16, 2017 · 1 revision

Welcome to the style.js wiki!

style.js is a CSS library created to make CSS in React easy.

Include style.js on your page:

<script src = "style.js"></script>

Examples:

    var style     = new Style();
    var myPadding = style.padding(5);
    var myCursor  = style.cursor("pointer");
    var myBorder  = style.border("2px solid blue");
    var myBg      = style.background("pink");
    var myFont    = style.font(38, "Arial", "orangered");
    var myPos     = style.position("relative");
    var myDisplay = style.display("inline-block");

    // merge some of the styles above:
    var merged = new style.merge(myPos, myDisplay, myPadding, myCursor, myBorder, myBg, myFont);

    // var myFont = style.font(ReactElement);

    function Button() {
        return <div className = "pressMe"
                        style = { merged }
                        onClick = { ()=>{console.log("Clicked!")} }>
                        Click Me!</div>
    }

    var root = document.getElementById("root");//document.body;//Id("root");

    ReactDOM.render(<Button />, root, ()=>{
        console.log("This button was rendered!");
    });
Clone this wiki locally