使用 styled-jsx 而不弹出 create-react-app答案

【问题标题】：Use styled-jsx without ejecting create-react-app使用 styled-jsx 而不弹出 create-react-app
【发布时间】：2021-02-28 02:55:11
【问题描述】：

自从我开始使用 NextJS，我就非常喜欢 styled-jsx（我知道，不是每个人都喜欢它）。我很想在我的创建反应应用程序中使用它。在本地它工作得很好。但是，反应向我显示了错误：

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

据我了解，这意味着代码不会被 babel 传递。我需要将 babel 插件添加到我的 Create React App Babel 配置中 - 如果不弹出，这是不可能的。

我也读过关于react-app-rewired 的文章，但我对它的信任不足以投入生产。有没有更原生的方式在我的 create react 应用项目中使用 styled-jsx？

【问题讨论】：

标签： reactjs babeljs create-react-app styled-jsx

【解决方案1】：

根据 styled-jsx 文档，可以使用styled-jsx/macro 中提供的css.resolve 函数在create-react-app 中使用它。阅读它here。

我认为这是预期用途，但我无法让它发挥作用：

import css from "styled-jsx/macro";

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

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

即使这确实有效，我也不喜欢它并且宁愿使用样式化组件或 CSS 模块（顺便说一下，内置在 CRA 中）。这远没有普通的 styled-jsx 代码那么干净。

似乎 styled-jsx 在不弹出的情况下不能很好地与 CRA 配合使用。如果你确实让它工作了，请告诉我，但现在我正在使用Styled Components 路由访问 CSS 模块。

【讨论】：

【解决方案2】：

我只是碰巧在另一个问题下详细回答了这个问题:) 希望它有所帮助 https://stackoverflow.com/a/66285652/511908

【讨论】：