用于在反应中为一行antd表着色的CSS

Posted 2023-02-22

【中文标题】用于在反应中为一行antd表着色的CSS

【英文标题】：CSS for colouring one row of antd table in react

【发布时间】：2019-04-12 17:23:04

【问题描述】：

这是我正在使用的 antd 样式的 CSS

style.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;

index.less

@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

【问题讨论】：

根据条件添加活动类并添加CSStr.active background-color: green;

【参考方案1】：

看看这些 Jsfiddle 链接是否对您有帮助。他们展示了两种改变行背景颜色的方法。

https://jsfiddle.net/2b2376a4/

https://jsfiddle.net/2b2376a4/

data: [
        id:1, name: 'one', color: '#fff',
        id:2, name: 'two', color: '#eee',
        id:3, name: 'three', color: '#ddd'
      ]

第一个链接

  render(text, record) 
            return 
                props: 
                style:  background: record.color ,
              ,
                children: <div>text</div>,
            ;
          ,

第二个链接

 rowClassName=(record) => record.color.replace('#', '')

【讨论】：

antd表如何禁用:hover？

我们也可以对标题执行此操作吗？

@P-RAD 我还没有尝试过，但我想我们可以。您也可以通过定位 .antd-table-head 来直接更改 CSS。

请接受这个答案，以便其他开发者也知道答案。

【参考方案2】：

到目前为止，我找到了两种方法：

一种方法是使用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。