antd 相关问题

当我放入像这样的 antd 折叠子标签时 1 当我放入像这样的 antd 折叠子标签时 <Collapse accordion expandIconPosition="end" items=[{ key: '1', label: '123', children: <ul><li>1</li><li>2</li><li>3</li></ul> }]/> 比折叠渲染每个 li 元素没有项目符号如何让antd渲染带有子弹的ul项目？我是 antd 库的新手，不知道如何修复它（如果可能的话）以下是有关如何将列表渲染为折叠组件面板的代码：注意：这是Ant Design版本5.13.2 import React from 'react'; import './index.css'; import { Collapse } from 'antd'; const renderChildren = () => { return <ul> <li>1</li> <li>3</li> <li>3</li> </ul> } const items = [ { key: '1', label: 'This is panel header 1', children: renderChildren(), } ]; const App = () => { const onChange = key => { console.log(key); }; return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />; }; export default App; 结果如下：您也可以在 Ant 官方设计页面上找到此解决方案：https://ant.design/components/collapse#examples

javascript reactjs typescript antd

回答 1 投票 0

如何让antd modal有圆角

<Modal title="" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} cancelButtonProps={{ style: { display: "none" } }} > <img src="./test.svg" alt="" style={{ marginLeft: "8.5rem" }} /> <p>It has been added!</p> </Modal> 我尝试向模态框添加样式， style ={{borderRadius:"20px",overflow:"auto"}} 但这使得顶角变圆并切断了底部。只需覆盖 css/sass/scss 文件中的 .ant-modal-content 样式 /*your selectors if needed*/ .ant-modal-content { border-radius: 20px; /* background: red; */ } 示例：https://codesandbox.io/s/antd-reproductive-template-forked-qqe5k?file=/index.css:27-127 您需要按照以下方式覆盖 .ant-modal 和 .ant-modal-content： .ant-modal { border-radius: 20px; /* Only border-radius here */ } .ant-modal-content { border-radius: 20px; /* border: 10px solid black; */ } 这样你的两个角都会变圆如果您应用该样式： .ant-modal-content { border-radius: 20px; } 只有底角会变圆。因此，您还需要使用“.ant-modal-header”定位顶角。这是完整的样式： .ant-modal-content,.ant-modal-header { border-radius: 20px; } 现在所有的角都应该是圆角的

antd ant-design-pro

回答 3 投票 0

在antd中的卡头添加图标和标题

我正在尝试在 antd 响应卡中添加标题和图标，但无法添加并找到任何解决方案，任何人都可以帮助我解决这个问题，因为我对此很陌生，我无法弄清楚我...

reactjs responsive antd card

回答 2 投票 0

如何在 React 中自定义 Antd v5+ 中的各个菜单项？

我想更改一些项目的背景颜色、边框半径等，但我该怎么做？ const items1: MenuProps['items'] = ['个人', 'Bisnis', 'Masuk'].map((key) => ({ 钥匙，拉贝...

reactjs antd

回答 1 投票 0

Antd：当我的 Select.Option 是组件时，如何在 Select 的输入中指定文本

使用Antd时，我发现无法在Select的输入中指定文本。这是我的代码： val item = {id: id1, name: name1, key1: value1, key2: value2, key3: value3} 使用Antd时，我发现无法在Select的输入中指定文本。这是我的代码： val item = {id: id1, name: name1, key1: value1, key2: value2, key3: value3} <Select.Option value={item.id}> <Card> <p>key1: {item.key1}</p> <p>key2: {item.key2}</p> <p>key3: {item.key3}</p> </Card> </Select.Option> 现在当我用 Select 选择它时，我会在输入字段中得到一个 Card 组件，这很难看。我想在输入字段中显示 item.name，同时在下拉列表中显示卡片组件。大家知道怎么处理吗？在下拉列表中显示卡片组件时，无法在输入字段中显示 item.name。输入字段和下拉列表中显示的内容必须相同。以下是显示输入字段和下拉列表的 item.name 的方法： import { Select } from 'antd'; const Option = Select.Option; <Select> <Option key={item.id}>{item.name}</Option> </Select> 你可以使用 optionLabelProp="label" 来做到这一点 <Select optionLabelProp="label"> // your Select.Option </Select>

reactjs antd

回答 2 投票 0

在REACT中使用ANTD动态添加规则输入

我需要自动向输入添加规则。我想获取对象并添加规则，或多或少类似于下面的代码，但这不起作用，我无法做类似的事情。谁能给...

reactjs antd

回答 1 投票 0

在antd复选框组中禁用按字母或数字排序选择

我有这个代码 ` 从 'react' 导入 React, { useState }; 导入'./index.css'; 从'antd'导入{复选框}； const CheckboxGroup = Checkbox.Group； const plainOptions = ['苹果', '梨', '奥兰...

reactjs antd

回答 1 投票 0

在ReactJS中使用动画在网格上添加列

我正在尝试在 antd 中的行上添加一列后添加动画，这是我的代码从 'react' 导入 React, { useState }; 从'antd'导入{列，行}；常量页面 = () => { 常量 [

css reactjs animation grid antd

回答 1 投票 0

Antd 选择值标签

我的状态只有 id 来加载选择 //ComponentDidMount方法让country_data =等待axios.get('/api/v1/countries/'); country_data.data.map((数据) => { 国家.推(<

javascript select antd

回答 2 投票 0

Ant design 上传组件只能在第二次尝试时起作用

我正在使用 Ant Design 上传组件，一切正常，但只有第二次尝试。当我的页面首次加载时，上传按钮呈现为 + 图标。当我第一次选择一个文件时，我可以看到