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

Question

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

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

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

我也读过关于react-app-rewired但我不太相信它可以投入生产。 在我的 create react app 项目中是否有更原生的方式来使用styled-jsx ？

Answer 1

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

我认为这是预期用途，但我无法使其正常工作：

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 配合使用。 如果你真的让它工作了，请告诉我，但现在我正在使用样式化组件路线向下浏览 CSS 模块。

Answer 2

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