如何解决标题样式根据 tsx 或 jsx 扩展名而变化
我在 app.tsx
中有这个简单的函数来呈现表格。标题清晰可见(黑底白字)。
import React from 'react';
import { Table,Thead,Tbody,Tr,Th,Td } from "@chakra-ui/react"
export default function App() {
return(
<Table variant="simple" size="sm">
<Thead>
<Tr>
<Th>A</Th>
<Th>B</Th>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>a</Td>
<Td>b</Td>
</Tr>
</Tbody>
</Table>
)
}
但是,如果我将文件名改为 app.jsx
,将呈现同一个表,但其标题很难看到:
要复制这个:
git clone https://github.com/somguyth/chakra-ui-header-bug.git
cd chakra-ui-header-bug
npm install
npm run dev
然后打开 localhost:9000
并将 app.jsx
更改为 app.tsx
并观察代码重新编译后标题颜色如何变化。
标题元素(app.tsx
):
不是 (app.jsx
) 时的标题元素:
EDIT:我可以通过将 <ChakraProvider theme={darkTheme}>
放入 app.jsx
(除了 index.tsx
)来“修复”它。检查标题的元素以了解其修复原因,th
标记内的类返回到正确的 css-4v3u8n
,而不是错误的 css-r10se1
。我不知道这是什么意思或如何正确修复它(即如何修复它而不必使用 ChakraProvider
两次)。
我的index.tsx
:
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider,extendTheme } from "@chakra-ui/react"
import App from "./app"
const darkTheme = extendTheme({
config: {
useSystemColorMode: false,initialColorMode: "dark"
}
});
ReactDOM.render(
<ChakraProvider theme={darkTheme}>
<App />
</ChakraProvider>,document.getElementById("root")
);
以及我在 webpack.config.js
中的模块规则:
module: {
rules: [
{
test: /\.tsx?$/,use: "ts-loader",exclude: /node_modules/
},{
test: /\.m?jsx?$/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
presets: ['@babel/preset-env',"@babel/preset-react"]
}
},resolve: {
fullySpecified: false,},{
test: /\.css$/,use: ['style-loader','css-loader']
}
],
还有我的.babel.rc
:
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
还有我的package.json
:
{
"name": "test","version": "1.0.0","description": "","scripts": {
"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack serve"
},"keywords": [],"author": "","license": "ISC","dependencies": {
"@chakra-ui/icons": "^1.0.14","@chakra-ui/react": "^1.6.5","@emotion/react": "^11.4.0","@emotion/styled": "^11.3.0","css-loader": "^5.2.7","framer-motion": "^4.1.17","react": "^17.0.2","react-dom": "^17.0.2","react-table": "^7.7.0","typescript": "^4.3.5"
},"devDependencies": {
"@babel/core": "^7.14.6","@babel/preset-env": "^7.14.7","@babel/preset-react": "^7.14.5","@types/react-dom": "^17.0.9","@types/react-table": "^7.7.2","babel-loader": "^8.2.2","html-webpack-plugin": "^5.3.2","ts-loader": "^9.2.3","webpack": "^5.45.1","webpack-cli": "^4.7.2","webpack-dev-server": "^3.11.2"
}
}
解决方法
发生这种情况是因为您的捆绑包中有两个版本的 @chakra-ui/react
包,一个是 cjs
格式,一个是 esm
格式。在使用 React Context 时,同一个文件的两个副本会创建两个不同的 React Context(相当于在两个不同的文件中调用 React.createContext
),所以一个副本中的 Consumer 无法从另一个版本的 Provider 获取值。
这可以通过运行 npx webpack build --mode production --profile --json=stats.json
并将 stats.json
文件加载到 Webpack stats analyse tool 中来验证, 可以提供有关您的包的许多内部信息:
Webpack's documentation on package exports
(Webpack 统计分析工具显示有两个版本的 @chakra-ui/react
包)
重复@chakra-ui/react
包的原因是你的配置使TypeScript转文件为CommonJS格式,Babel转文件为ESModule格式,而@chakra-ui/react
的{{1}}有一个{{ 1}} 字段为不同的导入请求指定了不同的文件:
package.json
(inspect-loader
,基本上,使用 exports
将导入一个文件,使用 // @chakra-ui/react/package.json
"exports": {
".": {
"require": "./dist/cjs/index.js","default": "./dist/esm/index.js"
}
}
将导入另一个文件)
require
import
(您可以使用 {{3}} 调试加载器输出)
要解决此问题,您可以将 // Output of src/index.tsx just after ts-loader
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports,"__esModule",{ value: true });
var react_1 = __importDefault(require("react"));
var react_dom_1 = __importDefault(require("react-dom"));
var react_2 = require("@chakra-ui/react");
var app_1 = __importDefault(require("./app"));
var darkTheme = react_2.extendTheme({
config: {
useSystemColorMode: false,initialColorMode: "dark"
}
});
react_dom_1.default.render(react_1.default.createElement(react_2.ChakraProvider,{ theme: darkTheme },react_1.default.createElement(app_1.default,null)),document.getElementById("root"));
更改为输出 ESModule:
// Output of src/app.jsx just after babel-loader
import React from 'react';
import { Table,Thead,Tbody,Tr,Th,Td } from "@chakra-ui/react";
export default function App() {
return /*#__PURE__*/React.createElement(Table,{
variant: "simple",size: "sm"
},/*#__PURE__*/React.createElement(Thead,null,/*#__PURE__*/React.createElement(Tr,/*#__PURE__*/React.createElement(Th,"A"),"B"))),/*#__PURE__*/React.createElement(Tbody,/*#__PURE__*/React.createElement(Td,"a"),"b"))));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。