antd 相关问题

通过添加 style 属性，我只能更改 Card 组件主体部分的颜色。我怎样才能更改标题部分？通过添加 style 属性，我只能更改 Card 组件主体部分的颜色。我怎样才能更改标题部分？ <Card title='Card title' bordered loading={this.onLoading()} style={{ backgroundColor: '#aaaaaa' }}> <Row type='flex' justify='center'> <h1>Card content</h1> </Row> </Card> 以下内容对我有用。我必须删除整个卡片的背景颜色，并为头部和正文内容设置不同的背景颜色： <Card title="Track title" style={{backgroundColor: 'rgba(255, 255, 255, 0.0)', border: 0 }} headStyle={{backgroundColor: 'rgba(255, 255, 255, 0.4)', border: 0 }} bodyStyle={{backgroundColor: 'rgba(255, 0, 0, 0.4)', border: 0 }} > <Card.Meta description="Track author" /> </Card> 结果：希望有帮助！适用于 antd 4.x 版本您可以使用 headStyle 和 bodyStyle 属性来更改背景颜色 <Card title="Card title" headStyle={{ backgroundColor: '#5c6cfa', color: '#ffffff' }} bodyStyle={{ backgroundColor: '#a9bbff' }} bordered={false} style={{ width: 300 }} > <p>Card content</p> <p>Card content</p> <p>Card content</p> </Card> 或可以自定义css类 .ant-card-head { background: #5c6cfa; color: #ffffff; } .ant-card-body { background: #a9bbff; } 截图：最后我别无选择，只能使用 css 来解决这个问题。 antd卡的结构是这样的 <div class="ant-card ant-card-bordered"> <div class="ant-card-head" \> <div class="ant-card-body" \> 并且 .ant-card-head 的背景样式为#fff。如果我像<Card style={{background:"#aaa"}}那样做某事，它将覆盖.ant-card类。如果我这样做<Card bodyStyle={{background:"#aaa"}}，它将覆盖 .ant-card-body 类，并且我找不到任何直接方法来覆盖 .ant-card-head 类，所以我最终使用 css 来设置 .ant-没有卡体背景，它就可以工作。你有一些错别字。 style:{{backgroundColor:'#aaaaaa'}} 应该是 style={{ backgroundColor: '#aaaaaa' }}，它对我有用：使用相同的代码并且确实有效：我可能需要检查您的页面以了解为什么它不适合您对于 ant design 的新版本（截至 2024 年 9 月），它变得更容易： <Card styles={{ body:{/* regular css style */},actions:{},cover:{},footer:{},header:{},extra:{},title:{}, }}> </Card> 也许按照文档使用ConfigProvider： <ConfigProvider theme={{ ..., components: { Card: { colorBgContainer: '#16191E' } } />

reactjs antd

回答 6 投票 0

如何更改ant-design库结果消息中的图标？

我正在为应用程序准备结果消息（React + Ant-desing + TypeScript）。在那里我应该更改默认图标的图标（根据我的设计文件从 ant-design 更改为自定义图标）。带有自定义图标的屏幕

reactjs antd react-typescript ant-design-pro

回答 1 投票 0

如何隐藏antd图表中的Y轴

我想在 Ant 设计图表中的 Line 组件中隐藏 Y 轴（React）我当前的版本是：反应：18.3.1 安特德：5.19.3 蚂蚁设计/图表：2.1.2 我正在使用该模块从 '... 导入 { Line }

reactjs antd

回答 1 投票 0

antd V5.18 Table 不必要的组件渲染 onMouseEnter onMouseLeave

const [hoveredRowKey, setHoveredRowKey] = useState(null); 常量数据 = [ { key: '1', name: 'John Brown', 年龄: 32, 地址: '纽约一号湖滨公园' }, { key: '2', name: 'Jim Green', ag...

reactjs antd

回答 1 投票 0

React Native（Exop）中的问题无法与 antd 一起使用

我正在与 Expo 合作开发 React-Native，并且想要导入 { 选择 } from "antd"; 代码是这样的：从“反应”导入{useState}； import { Select } from "antd&qu...

react-native expo antd

回答 1 投票 0

Radio Ant 设计时下拉重新加载

从“react”导入 React, { useState }; 导入“./index.css”；从“antd”导入类型{RadioChangeEvent}； import { 输入、Radio、Space、Select } from "antd&quo...

javascript reactjs ant antd

回答 1 投票 0

有什么方法可以通过reactjs点击按钮将Antd表数据导出到Excel表中

我是reactjs新手。我遇到一个场景，需要通过单击按钮将 Antd 表数据导出到 Excel 工作表。 Antd 是否有可用的默认选项？或者我们需要做一些事情...

reactjs antd

回答 2 投票 0

antd datepicker 如何在 const 中创建返回变量？

嗨，我是新手前端开发人员...... 问题在下面如何在 const onChange 中返回 a ？如果可能的话有什么关系？从“反应”导入反应从 'antd' 导入 { DatePicker } ；变种...

reactjs datatable jsx antd

回答 2 投票 0

处理“长按”以在 Ant Design 中显示下拉菜单

该组件通过触发上下文菜单事件在桌面设备上显示下拉菜单。是否可以在触摸设备上使用此下拉组件，而不是上下文菜单事件，

reactjs antd

回答 1 投票 0

如何自定义Antdesign步骤？

有没有办法自定义antdesign步骤线？我目前正在开发下一个 JS 项目，我们正在使用 CSS 模块。所以，我最近一直致力于定制这些 antdesign 步骤。我是

css next.js antd ant-design-pro nextjs14

回答 1 投票 0

如何更改ant图表设计的colorField属性的颜色

我在nextjs中有以下代码， '使用客户端'；从“反应”导入反应；从 '@ant-design/plots' 导入 { Column }; const ColumnChart = ({ 数据 }: 任意) => { 常量配置= { 数据， ...

antd

回答 1 投票 0

如何通过 Antd 和 VueJS 在表格单元格中使用 customRender

我在我的应用程序中使用antd，我正在尝试进行自定义渲染以在单元格中显示图像。我的列数组如下所示：列：[ { 标题: '设计', dataIndex: 'designImage.fi...

vue.js antd

回答 3 投票 0

从 Checkbox 切换后 Switch 组件不工作

我之前使用 Ant Design Checkbox 来检查和发布评论，运行良好，没有错误。我之前使用 Ant Design Checkbox 来检查和发布评论，运行良好，没有错误。 <Checkbox key={record.id} checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false} onChange={(e) => Update(e.target.checked, record)} /> 我想用 Switch 代替。 <Switch key={record.id} checked={Publish[record?.id]?.["ispublish"] == 'true' ? true : false} onChange={(e) => Update(e.target.checked, record)} /> 我收到错误：无法读取未定义的属性（读取“已检查”）我想要Switch工作。 onChange组件的Switch prop 回调需要两个参数。第一个是当前 checked 值，第二个是 onChange 事件对象。查看Switch组件API：财产描述类型 onChange 当选中状态发生变化时触发 function(checked: boolean, event: Event) 与CheckBox组件API相比：财产描述类型 onChange 状态改变时触发的回调函数 (e: CheckboxChangeEvent) => void 更新为使用第一个参数，checked: <Switch key={record.id} checked={Publish[record?.id]?.ispublish == 'true'} onChange={(checked) => Update(checked, record)} />

javascript reactjs jsx antd react-props

回答 1 投票 0

替换为复选框后开关不起作用

我之前使用复选框来检查和发布评论，它运行良好，没有错误。我之前使用复选框来检查和发布评论，它运行良好，没有错误。 <Checkbox key={record.id} checked={Publish[record?.id]?. ["ispublish"]=='true' ? true : false} onChange={(e)=>Update(e.target.checked, record)} /> 现在我想使用“Switch”安装。 <Switch key={record.id} checked={Publish[record?.id]?. ["ispublish"]=='true' ? true : false} onChange={(e)=>Update(e.target.checked, record)} /> 但是出现错误“无法读取未定义的属性（读取'检查）” 我想要Switch工作。 onChange组件的Switch prop 回调需要两个参数。第一个是当前 checked 值，第二个是 onChange 事件对象。请参阅 Switch 组件 API。 onChange - 当选中状态发生变化时触发 -function(checked: boolean, event: Event) 更新以使用以下任一选项： <Switch key={record.id} checked={Publish[record?.id]?.ispublish == 'true'} onChange={(checked) => Update(checked, record)} /> <Switch key={record.id} checked={Publish[record?.id]?.ispublish == 'true'} onChange={(_, e) => Update(e.target.checked, record)} />

reactjs react-router antd

回答 1 投票 0

替换为复选框后，React Switch 不起作用

reactjs react-router antd

回答 1 投票 0

antd 相关问题

最新问题