使用 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