export 'Icon' (imported as 'Icon') was not found in 'antd'
在 Ant Design 5 中,Icon
组件的使用方式有所变化。Ant Design 不再直接导出 Icon
组件,而是建议使用 @ant-design/icons
包来引入图标。这是为了更好地支持按需加载和减小打包体积。
react
import { Icon } from 'antd';
<Icon type="setting" />
变成
react
import { SettingOutlined } from '@ant-design/icons';
<SettingOutlined />
可以在同一个文件统一引入包装一层
form.create和getFieldDecorator不能用了
移除了 Form.create 方法,form
现可由 Form.useForm
获取
如果要继续使用可以安装 npm install --save @ant-design/compatible@v4-compatible-v3
主题变量
app根组件
react
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b082',
colorInfo: '#00b082',
borderRadius: 6,
},
components: {
Menu: {
itemHeight: 44, // 菜单项高度
},
},
}}
>
</ConfigProvider>
子组件中如何获取主题变量
javascript
import { theme } from 'antd';
const { useToken } = theme;
const Test = () => {
const { token } = useToken();
console.log(token.colorPrimary)
}
tree组件的子组件TreeNode被废弃,请使用treeData
代替
控制台会有警告但是还可以使用
index.js:119 Warning: children
of Tree is deprecated. Please use treeData
instead.
Modal组件
visible属性被open属性替代
bodyStyle={{ display: 'flex'}} 改成styles={{body: { display: 'flex'}}}
Warning: [antd: message] Static function can not consume context like dynamic theme. Please use 'App' component instead.
这个警告信息是 Ant Design 5.x 版本引入的一个新限制,表示静态方法(例如 message.success
, message.error
等)不能像动态主题那样消费上下文(context)。Ant Design 建议使用 App
组件来包裹你的应用,以便正确地处理上下文。
解决方法1
react
import { App } from 'antd';
const mymessage = () => {
const { message, modal, notification } = App.useApp()
const showMessage = () => { message.success('Success!'); }
}
解决方法2
定义MessageProvider组件
react
import React, { createContext, useContext } from 'react';
import { App, message } from 'antd';
import PropTypes from 'prop-types';
const MessageContext = createContext();
// 使用MessageProvider包裹自己的组件调用message可以获取context或redux的内容,因为外面有App包裹
export const MessageProvider = ({ children }) => {
return (
<App>
<MessageContext.Provider value={message}>
{children}
</MessageContext.Provider>
</App>
);
};
MessageProvider.propTypes = {
children: PropTypes.element,
};
export const useMessage = () => useContext(MessageContext);
使用MessageProvider组件
1、定义MyComponent组件
react
import React from 'react';
import { useMessage } from './MessageProvider';
const MyComponent = () => {
const message = useMessage();
const handleClick = () => {
message.success('This is a success message');
};
return (
<div>
<button onClick={handleClick}>Show Message</button>
</div>
);
};
export default MyComponent;
2、在MyApp.js中使用MessageProvider包裹MyComponent组件
react
import React from 'react';
import { MessageProvider } from '../components/MessageProvider';
import MyComponent from '../components/MyComponent';
function MyApp() {
return (
<MessageProvider>
<MyComponent />
</MessageProvider>
);
}
export default MyApp;
table组件Warning: Each child in a list should have a unique "key" prop.
table设置rowKey属性 rowKey={({ questionId }) => ${questionId}
}
Modal.confirm改变确认按钮颜色
react
Modal.confirm({
title: '确认删除吗?',
content: '删除后将无法使用该文章',
okText: '确认',
cancelText: '取消',
okButtonProps: {
style: {
backgroundColor: '#00b082', // 自定义确认按钮的背景颜色
borderColor: '#00b082', // 自定义确认按钮的边框颜色
},
},
onOk: async () => {
},
});
table表头文字居中,内容居左怎么设置?
通过设置columns
react
const columns = [
{
title: <div style={{ textAlign: 'center' }}>数量</div>,
dataIndex: 'count',
key: 'count',
align: 'left',
width: 260,
},
]
table怎么设置表头固定,表体超出高度滚动
js
<Table
className={cx('z-table')}
bordered
columns={getColumns(onDetail)}
scroll={{ y: 666 }}
size="middle"
dataSource={tableData}
rowKey={({ code }) => code}
pagination={false}
/>
设置 scroll={{ y: 666 }}
,表格即可滚动
antd-style包需要react版本是18,因为依赖react18中的startTransition
设置table内的滚动条样式可以使用antd-style采用css in js语法