css - 用于在反应中为一行antd表着色的CSS
问题描述
这是我正在使用的 antd 样式的 CSS
样式.css
.ant-table-tbody > tr > td, .ant-table-thead > tr > th
{
padding:4px;
}
tr:nth-child(odd){
background: #f1e6ff;
}
tr:nth-child(even){
background: white;
}
thead[class*="ant-table-thead"] th{
background-color:#000 !important;
color: white;
font-weight: bold;
border-color: #000;
text-align: center;
}
.table_btn
{
margin:0 !important;
}
.ant-btn
{
margin:0;
}
.ant-table-tbody > tr:hover > td {
color: #fff;
}
无索引
@import "callout";
@import 'e-commerce';
@import "pricing-tables";
@import "login";
@import "dashboard";
@import "error";
@import "editor";
@import "testimonials";
tr:nth-child(odd){
background:inherit !important;
}
.ant-modal-content {
.ant-modal-close{
color: #fff !important;
}
.ant-modal-header {
background-color: #000000;
.ant-modal-title {
color: #fff !important;
}
}
}
.table-wrapper {
.ant-btn {
padding: 0 10px;
height: 30px;
font-size: 13px;
> .anticon {
+ span {
margin-left: 5px;
}
}
&.ant-btn-success {
color: #3d8918;
border-color: #d9d9d9;
&:hover {
background-color:#3d8918;
color: #fff;
}
}
&.ant-btn-danger {
color: #c70d17;
background-color:#fff;
&:hover{
background-color:#c70d17;
color: #fff;
}
}
}
.actions {
text-align: right;
.ant-input {
border-radius: 2px;
padding:0 10px;
font-size: 13px;
height: 30px;
}
}
.table-layout {
.ant-table-small{
> .ant-table-content{
> .ant-table-body {
margin: 0 !important;
> table {
> .ant-table-tbody{
> tr{
> td{
padding: 2px 8px !important;
font-size: 13px !important;
text-align:center;
min-width: 80px;
.ant-btn {
width:100px;
}
}
}
}
}
}
}
index.js
<Table
className="table-layout"
columns={this.state.columns}
dataSource={filteredData}
rowClassName='data-row'
bordered={true}
size={"small"}
onRowDoubleClick={ (record, index, event) => this.handleEditModal(record) }
onRowClick={(record, index, event) => this.handleRowClick(record)}
loading={this.state.loading}
pagination={{ pageSize: 14 }}
/>
这就是在索引页面中使用Table的方式。style.css 和 index.less 是 CSS 的页面。
任何人都可以帮我在这个页面上写一个 CSS 来制作一排绿色吗?我想根据条件使一排绿色。我需要 CSS 我需要在代码所在的页面中调用 CSS
解决方案
到目前为止,我找到了两种方法来做到这一点:
一种方法是使用rowClassName
Table 的 prop:
.table-row-light {
background-color: #ffffff;
}
.table-row-dark {
background-color: #fbfbfb;
}
<Table
rowClassName={(record, index) => index % 2 === 0 ? 'table-row-light' : 'table-row-dark'}
columns={columns}
dataSource={dataSource}
loading={loading}
/>
第二种方法是使用纯 CSS
.table-striped-rows tr:nth-child(2n) td {
background-color: #fbfbfb;
}
.table-striped-rows thead {
background-color: #f1f1f1;
}
<Table
className="table-striped-rows"
columns={columns}
dataSource={dataSource}
loading={loading}
/>
请注意,rowClassName 仅适用于行,因此对于表头上的 CSS,我们只能使用上面的纯 CSS。
推荐阅读
- c# - 使用 c# 使用证书进行 SSL 客户端身份验证
- redirect - 2台服务器在相同的IP和端口
- text-extraction - 如何从合并的 PDF 文件中提取文本并转换为 txt 文件?
- android - 如何在 Flutter 中使用 Navigator.push 在 ListView 上设置可点击按钮
- reactjs - 在 React Web 应用程序中的 Firebase 身份验证登录后,身份验证上下文不允许访问受保护的路由
- javascript - 当我指定列宽等于表格宽度除以列数时,为什么会有水平滚动?
- apache - 静态站点:最少的服务器配置
- c# - Blazor:在不锁定组件的 ctor 或 InvokeAsync 的情况下增加静态字段是否安全?
- angular - 在角度 10 的 tsconfig.json 中找不到 typeRoots
- docker - 为什么我在使用 MySQL 的 docker 中使用几乎相同的命令得到不同的结果?