更新时间:2023-09-03 14:57:10
确定.由于我本人花了几个小时才解决此问题,所以希望我能为同样有此问题的人们提供帮助.
OK. Since I myself spent a few hours before solving this, I hope I can help you guys who also have this problem.
要将styled-jsx与create-react-app一起使用,您需要:
To use styled-jsx with create-react-app, you need:
纱线添加react-app-rewired custom-cra
"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",
package.json
旁边)文件 config-overrides.js
package.json
) file config-overrides.js
{ override, addBabelPlugin, addBabelPreset } = require('customize-cra');
module.exports = override(
addBabelPlugin('styled-jsx/babel')
);
.babelrc
(仅在运行 jest test
时使用).babelrc
(it is only used when you run jest test
){
"plugins": ["styled-jsx/babel"]
}
index.js
中(或将React装入DOM的位置),在调用ReactDOM.render(....)之前,插入以下代码,取自 https://github.com/vercel/styled-jsx/issues/560#issuecomment-599371026 index.js
(or where it is you mount React into DOM), before calling ReactDOM.render(....), insert the following bit of code,
taken from https://github.com/vercel/styled-jsx/issues/560#issuecomment-599371026
const _JSXStyle = require('styled-jsx/style').default;
if (typeof global !== 'undefined') {
Object.assign(global, { _JSXStyle });
}
这是不幸的,但是没有它,这种复杂的配置会有些变幻.
It is unfortunate, but this complex configuration is a bit fickle without it.
仅当将 yarn build
或 yarn test
与create-react-app一起使用时,才需要执行步骤4和5.
You need steps 4 and 5 only if you use yarn build
or yarn test
with create-react-app.