cssreactjsnext.jsstyled-jsx

Next JS Returned Element Does Not Apply CSS

It seems if I create a function to return a dom element with a className associated, the local style does not get applied e.g;

export default function thing(){
    const elem = function(){
        return (<div className="myCss">Hello</div>)
    }
    
    return(
        <>
            { elem() }
            <style jsx>{` .myCss{ color:#f00 } `}</style>
        </>

    )    
}

My expectation is that elem() would return an element that would inherit the style associated to the .myCss class. But it doesn't :/

Solution

  • By default styled-jsx transpiles the stylenames, so your example generates dynamic styles e.g: .mycss-123 - If you want .myCss to be intact, add global - Additionally, your template string contains spaces.

    This works.

    <style jsx global>{`.myCss{ color:red }`}</style>