如何更改 ant.design 'Table' 组件的样式?

2024-01-04

我现在有一个表格,我想将表格的列标题更改为不同的颜色。

链接到表 https://user-images.githubusercontent.com/24757872/39104365-d5b5830a-4675-11e8-861c-5b4e82e41262.png

我尝试过的事情:

  1. <Table className="ant-table-thead">
     ...
    </Table>
    
  2. <Table className="ant-table-content">
    ...
    </Table>
    

在 css 文件中,我放置了:

.ant-table-content {
  background-color: rgb(127, 127, 127);
  color: rgb(127, 127, 127);
 }

我希望得到一些帮助来设计这个特定的 Table 组件的样式,但是如果您也能给我一个关于如何在 ant.design 中设计其他组件的样式的一般指南(或者我可以在某个地方找到所有可能的类名),我将不胜感激。


所以我发现大体的想法是对的。对于像 Table 这样的每个 html 组件,定义一个 className 是常见的做法。因为我使用 Ant-Design,所以我必须有特定的类名。这些 className 可以在客户端的 node_modules 文件夹中、antd/es 以及正在使用的任何特定组件中找到。然后,index.css 文件列出了所有可编辑的类名和特定属性。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何更改 ant.design 'Table' 组件的样式? 的相关文章

  • 切换 Antd 表单的可见性

    当选择下拉菜单中的选项时 我需要显示某些输入 下拉菜单包含三个选项 血压 体重和温度 当用户选择一个选项时 与该选项相关的输入字段需要可见 而其余的则需要隐藏 例如 当用户选择 血压 时 收缩压和舒张压输入字段需要可见 而温度和体重字段需要
  • 如何删除损坏的图像框?

    我正在尝试构建一个电子邮件模板 其中我必须向不同的邮件客户端 例如 Outlook thunderbird 显示一些图像 现在的问题是 当这些客户端不允许显示图像时 会显示我不想显示的损坏的图像框 我也参考过 参考链接1 https i s
  • 如何使用 antd upload React 发送 multipart/form-data

    我正在使用 React 和 antd 我使用的 antd 组件是拖放 https ant design components upload 我正在尝试使用 FormData 对象发送多部分 表单数据 它发送文件 应作为 blob 发送的 z
  • 表格中超级简单的 CSS 工具提示,为什么它不显示,我可以让它工作吗?

    我一直在尝试为我的客户在此页面上实现许多不同的工具提示 他坚持认为 当您将鼠标悬停在订单页面中的产品名称上时 我们会显示产品图片 我决定使用超级简单的 CSS 工具提示 它非常容易实现并且完全符合我们的要求 它适用于动态页面 而我尝试过的其
  • 如何删除 html 表格中单元格之间的空格

    我尝试删除 Table1Header 和 Table2Header 之间的空白 我尝试了 border 0px padding 0px 和 border spacing 0px 风格 Firefox 和 Opera 告诉我 我的边框间距样式
  • CSS col 可见性:折叠在 Chrome 上不起作用

    我试图在 html 代码中隐藏一些 col 使用 MDN 添加了 colgroup 和 col 并且我正在尝试 cols 的样式 The td 内容文本 可见 在所有浏览器中可见 好 内容文本 隐藏 在 Chrome 中可见 不好 在 Fi
  • Firefox 中缺少表格边框

    我有一个包含数据的表格 当我在 Firefox 中查看它时 某些边框没有显示 请参阅随附的屏幕截图 在任何其他浏览器中都不会发生这种情况 在 Firefox IE Safari 和 Chrome 中测试 知道为什么以及如何解决它吗 我使用样
  • HTML 表格换行列

    我有一个表 用户将数据输入到列中 每次用户输入数据时都会创建一个新列 一段时间后 他们有大量的专栏 我需要它们换行 我知道如何将文本换行在列内 但我需要将整个列换行在第一列下方 依此类推 您不应该为此使用表格 您应该使用具有 float l
  • 如何在提交值后重置 antd datepicker?

    在这里 我提供了在codesandbox上工作的示例 提交表单后如何重置日期选择器值 state setFieldValue onChange setFieldValue gt this setState setFieldValue nul
  • 预注册 ATL 窗口类

    我在一个项目中使用了 ATL 和 WTL 的组合 并从中派生了我自己的类CWindowImpl 看起来像这样 class CMyControl public CWindowImpl
  • 使用 jQuery 在单击时隐藏当前表格行

    我有一堆表行 例如 tr td cell1 td td cell2 td td a href action php cell3 a td tr 当有人单击单元格 a3 中的链接时 有没有办法隐藏整个 tr 行 那么当他们点击单元格 3 中的
  • 捕获动态表中 HTML 元素的值

    我有从数据库生成的以下动态表
  • 如何使用递归字符串连接构建带有小计的 HTML 表?

    我有接下来的两张表 CREATE TABLE SalesByStore Brand VARCHAR 10 StoreName VARCHAR 50 Sales DECIMAL 10 2 CREATE TABLE SalesByBrand B
  • 如何按 Angular 表中的属性(该属性具有单个 rownspan)进行分组?

    我没有找到这个问题的合适标题 我的问题是 例如 我有一个包含两列的表 列汽车品牌和列汽车型号 我希望表是 like in this picture 换句话说 品牌名称只会出现 1 次 我的输入数组采用以下 json 格式 brand Aud
  • 如何使用 .babelrc 让 babel-plugin-import 适用于 antd?

    我是 React babel 和 antd 的新手 我安装了 React 并使用 create react app 启动了一个项目 我安装了antd ant design 它建议使用 babel plugin import 所以我也安装了它
  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案?

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01
  • 如何使用 Antd / Less 和 Sass / CSS 模块配置 Next.js

    我想用Next js https nextjs org 带有 Sass 和 CSS 模块但也想使用蚂蚁设计 https ant design 并希望对较小的建筑尺寸使用 Less 样式 我可以启用 CSS 模块或 Less 加载器 但不能同
  • 使用 JQuery 更改表附加行中某些单元格的背景颜色

    我正在向表中追加一行 如何更改该行中一组单元格的背景颜色 假设列有 25 列 从 17 到 22 的列需要更改背景颜色 这是我到目前为止所尝试的 table1 append row1 row1 children td not td eq 0
  • 动态向表添加行

    目前 我正在尝试创建一个表 其内容应该由子类创建 查询 RESTful Web 服务的结果 我已经为此工作了相当长一段时间 但我似乎无法让它发挥作用 我尝试了很多不同的解决方案 在子类中创建表并将其添加到 Page Controls 中 这
  • 表格固定标题和第一列 css/html

    我有一个包含大量行和列的表 但我想固定标题和第一列 这是我需要的图片 只有粉色部分必须水平和垂直滚动 但其他部分在滚动过程中必须保持可见 我的表位于 div 中 首先 我应该使用一张桌子还是四张桌子 蓝色桌子 红色桌子 绿色桌子和粉色桌子

随机推荐