reactjs - 使用 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但我不相信它足以投入生产。是否有更原生的使用方式 styled-jsx在我的 create react app 项目中？

Answer 1

根据 styled-jsx 文档，它可以在 create-react-app 中使用通过使用 css.resolve styled-jsx/macro 中提供的功能.阅读它 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 模块。路线。