Ant Design 的组选择组件在 Select 组件的基础上添加了穿梭框和搜索功能,同样可以针对该组件添加暗黑主题。
首先,在引入 Ant Design 样式文件的时候,可以添加 antd/dist/antd.dark.css 样式文件,即可启用暗黑主题。在组件中添加以下代码即可:
import { Transfer } from 'antd';
function handleChange(targetKeys) {
console.log('Target Keys:', targetKeys);
}
const data = [];
for (let i = 0; i < 10; i++) {
data.push({
key: i.toString(),
title: `Content ${i + 1}`,
description: `description of content ${i + 1}`,
chosen: Math.random() * 2 > 1,
});
}
ReactDOM.render(
`${item.title}-${item.description}`}
footer={renderFooter}
locale={{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空' }}
/>,
mountNode,
);
在以上代码中,组件样式已经与 Ant Design 中默认主题保持一致,但实际效果为暗黑主题。另外,需要注意的是,不同版本的 Ant Design 可能会有不同的暗黑主题实现方式,具体要以所使用版本的官方文档为准。