CODEWITHSUNDEEP
reactjsbabeljscreate-react-appstyled-jsx
Xen_mar
Xen_mar

Reputation: 9702

Use styled-jsx without ejecting create-react-app

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?

Upvotes: 4

Views: 1565

Answers (2)

Gleb Varenov
Gleb Varenov

Reputation: 2835

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

Upvotes: 3

MSOACC
MSOACC

Reputation: 3665

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.

Upvotes: 2

Related Questions