8

我正在尝试将 styled-jsx 与一些代码一起使用。但是，无论我做什么，我似乎都得到了一个错误

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

If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.
    in style (at App.js:12)
    in div (at App.js:9)
    in Test (created by Route)
    in Route (at App.js:29)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:27)
    in App (at src/index.js:7)

我已经尝试重新安装 node_modules，确保我的配置都很好，并测试了不同的版本。

我的 package.json，

{
  "name": "preview",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "contentful": "^7.4.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.4",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^3.0.1",
    "socket.io-client": "^2.2.0",
    "styled-jsx": "^3.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "babel": {
    "presets": [
      "@babel/preset-stage-2"
    ],
    "plugins": [
      "styled-jsx/babel"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:5000/"
}

我的示例 React 代码仍然会引发错误。

const Test = () => {
    return (
        <div>
        <p>test
        </p>
        <style jsx>{
            `
            p {
                color: red;
            }
            `
        }
        </style>
        </div>)
}

class App extends Component {

  render () {
    return (
      <Router>

        <Route path='/test' component={Test}/>

      </Router>

    )
  }

}

export default App;

根据文档，我希望没有任何错误消息

4

5 回答 5

7

好的。由于我自己花了几个小时才解决这个问题，我希望我能帮助你们也有这个问题。

要与 一起使用styled-jsx，create-react-app您需要：

  1. yarn add react-app-rewired customize-cra

  2. 替换为package.json：

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",

和

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
  1. 创建（在根目录中，旁边package.json）文件config-overrides.js
const { override, addBabelPlugin, addBabelPreset } = require('customize-cra');
module.exports = override(
    addBabelPlugin('styled-jsx/babel')
);
  1. 在根目录下创建文件.babelrc（仅在运行时使用jest test）
{
    "plugins": ["styled-jsx/babel"]
}
  1. 在您的index.js（或您将 React 安装到 DOMReactDOM.render(...)的位置）中，在调用之前，插入以下代码，取自styled-jsx问题 #560
const _JSXStyle = require('styled-jsx/style').default;
if (typeof global !== 'undefined') {
    Object.assign(global, { _JSXStyle });
}

很不幸，但是没有它，这个复杂的配置就有点变幻莫测了。

仅当您使用yarn build或yarn test与 create-react-app 一起使用时，才需要步骤 4 和 5。

于 2021-02-19T22:10:36.617 回答
4

这个问题的答案在警告中。只需将样式的 jsx 属性类型从布尔值转换为字符串：

从：<style jsx> {your style here} </style>

至：<style jsx="true"> {your style here} </style>

于 2022-01-25T05:49:03.953 回答
0

对于仍在受苦的任何人，请尝试在 styled-jsx 文档中找到的这段代码：

import _JSXStyle from 'styled-jsx/style'
export default () => (
  <div className="jsx-123">
    <p className="jsx-123">only this paragraph will get the style :)</p>
    <_JSXStyle id="123">{`p.jsx-123 {color: red;}`}</_JSXStyle>
  </div>
)

对我来说就像一个魅力。

https://github.com/vercel/styled-jsx

于 2021-12-16T03:54:46.867 回答
0

以@gnopor 的回答为基础。

我为 React 和 Typescript 编写了一个自定义样式组件。

interface Props {
    children: string;
    global ?: "true" | "false";
}

function Style({ children, global = "false" } : Props) {
  return (
    <style {...{ jsx : "true", global : global}}>
        {children}
    </style>
  )
}

export default Style

然后你可以在任何地方使用它，就像使用 styled-jsx 的 style 标签一样。

import Style from "../components/Style";

.
.
.

<Style>
  {`
    color: #000000
  `}
</Style>
于 2022-02-27T10:33:53.640 回答
-2

使用样式组件。不支持嵌套样式。看看https://github.com/zeit/styled-jsx/pull/260 避免这种情况：

<div>
  <span>
      <style jsx>{...}</style>
  </span>
</div>
于 2019-12-06T17:01:54.050 回答