Use styled-jsx without ejecting create-react-app

Question

Since I started using NextJS, I've grown quite fond of styled-jsx (I know, not everyone likes it). I'd love to use it in my create react app. Locally it works great. However, react shows me the error:

Warning: Received `true` for a non-boolean attribute `jsx`.

To my understanding, this means that the code does not get transpired by babel. I would need to add the babel plugin to my Create React App Babel config - which isn't possible without ejecting.

I've also read about react-app-rewired but I don't trust it enough to put into production. Is there a more native way to use styled-jsx in my create react app project?

Answer 1

I just happened to answer this in details under another question :) Hope it helps https://stackoverflow.com/a/66285652/511908

Answer 2

According to the styled-jsx docs, it can be used in create-react-app by using the css.resolve function provided in styled-jsx/macro. Read about it here.

I think this is the intended use but I could not get it working:

import css from "styled-jsx/macro";

export function Login() {
    const { demoClass, styles } = css.resolve`
        label {
            color: green;
        }
    `;

    return (
        <label className={demoClass}>Test</label>
    );
}

Even if this did work, I dislike it and would rather use styled components or CSS modules (built into CRA, by the way). This is nowhere near as clean as the normal styled-jsx code.

It seems that styled-jsx just does not work well with CRA without ejecting. If you do get it working please let me know, but right now I am going down the CSS modules with Styled Components route.