ant表格css样式修改

一、ant table默认的样式并不能满足我们日常的需求，一版都需要修改，默认情况下，我们引入table组件后他是有自己的样式的，我们可以通过默认样式覆盖的方法来修改ant table表格的样式。

二。样式修改实例：

.table-styles {
  height: 100%;

  .ant-table-wrapper{
    height: 100%;

    .ant-spin-nested-loading {
      position: relative;
      height: 100%;

      .ant-spin-container {
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        position: relative;
        height: 100%;

        .ant-table {
          height: 100%;
          background:linear-gradient(180deg,rgba(17,12,48,1) 0%,rgba(0,0,0,0.19) 100%);
          border-radius: 0px 0px 0 0;

         
            height: 100%;
            .ant-table-content {
              height: 100%;
              .ant-table-body table td {
                border-color: transparent !important;
                text-align: center;
              }

               //背景色奇数和偶数(自定义)
              .back-02 {
                 background:transparent!important;
                 opacity:1;
                 }

              .back-01 {
                 background:rgba(14,127,180,0.29);   
              } 

            
              .ant-table-scroll {
                height: 100%;

                .ant-table-header{
                  overflow: hidden;
                  margin-bottom: 3px !important;
                  // padding-bottom: 0px !important;
                  margin-top: -2px !important;
                  margin-left: -2px !important;
                  margin-right: -2px !important
                }

                .ant-table-body {
                  //max-height: 91% !important ;
                  overflow-y: auto !important; 
                  background:transparent!important;

                  //滚动条
                  &::-webkit-scrollbar {
                    height: 5px;
                  }
                  &::-webkit-scrollbar-thumb {
                    border-radius: 5px;
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background-image: url('/src/assets/safetyManage/hengxian.png');
                    background-repeat: no-repeat;
                   
                    background-size: 100% 100%;
                  }
                  &::-webkit-scrollbar-track {
                    -webkit-box-shadow: 0;
                    border-radius: 0;
                    background-image: url('/src/assets/safetyManage/gdt.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                  }
                
                  &::-webkit-scrollbar-button {
                    background-image: url('/src/assets/safetyManage/shang.png');
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                  }

                      table {
                        width: 300px;
                        border-color: transparent !important;

                       td {
                         border-color: transparent !important;

                        }
                    }
                    
                }

            }

          }
          
          
        }

        .ant-pagination {
    
          position: absolute;
          width: 100%;
          text-align: center;
          vertical-align: bottom !important;
          background:rgba(14,127,180,0.29);;
          bottom: -2.3%;
          box-shadow:0px 2px 10px rgba(0,0,0,0.16);
          .ant-pagination-options {
            .select-scroll-wrapper {
              margin: 0;
            }
          }

          .mini .ant-pagination-total-text {
            height: 20px;
            line-height: 20px;
            font-size:13px;
            font-family:Microsoft YaHei UI;
            font-weight:400;
            line-height: 19px;
            color:rgba(255,255,255,1);
           
         
          }

          .mini .ant-pagination-options {
            margin-left: 8px;
            display: none;
          }
      
          .ant-pagination-total-text {
             font-size:13px;
             font-family:Microsoft YaHei UI;
             font-weight:400;
             line-height: 19px;
             color:rgba(255,255,255,1);
             //float: right
          }
      
          .ant-pagination-prev {
            background: url('/src/assets/safetyManage/zuo.png') no-repeat;
            a {
              &::after {
                color:rgba(0,185,255,0.3)
              }
            }
          }
      
          .ant-pagination-next {
            background: url('/src/assets/safetyManage/you.png') no-repeat;
            background-size: 100% 100%;
            a {
              &::after {
                color:rgba(0,185,255,0.3)
              }
            }
            
          }
      
          //分页颜色调整
          .ant-pagination-item-active {
            background-color: #5FFFFD !important;
            border-color: #5FFFFD !important;
          }
      
           .ant-pagination-item {
            border: 0;
            margin: 0;
            min-width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: #00B9FF !important;
        }
      
          .ant-pagination-jump-next {
            &::after {
              color: white;
            }
          }
       }
      }
    }

      //修改表头文字、背景颜色  
      .ant-table-thead > tr >th{
            color: white;
            background: #3d466b !important;
            //background: #222b51 !important;
            border-color: transparent !important;
            text-align: center;
            padding: 0rem;
            height: 40px;
          }

             //鼠标悬浮行背景色修改
            table tbody tr:hover>td { 
            background-color:#00B9FF !important;
         }


           .ant-pagination.mini .ant-pagination-options {
             margin-left: 8px;
             display: none;
           }


           .safe-table-title-font-red {
            color:white;
            height:100%;
            background-color:#651E39;
            padding-top: 8%
          }

          .safe-table-title-font-red-right {
            color:white;
            height:100%;
            background-color:#651E39;
            padding-top: 14%
          }

          .safe-table-title-font-green {
            color:white;
            height:100%;
            background-color:#186B50;
            padding-top: 14%
          }

          .safe-table-title-font-yellow {
            color:white;
            height:100%;
            background-color:#655E39;
            padding-top: 14%
          }

          //灰色
          .safe-table-title-font-grey {
            color:white;
            height:100%;
            background-color:#324870;
            padding-top: 5%
          }


  }


  
  
 



  
  


}

三、特别说明，奇偶数行不通背景色，是通过table组件的rowClassName属性来实现，可以通过一定的条件判断，赋值给他对应得样式名称就行，比如我赋值的是奇数行就引入样式back-01 偶数的引入样式back-02

                <AmosGridTable
                  columns={columns}
                  dataList={data}
                  isPageable={pagination}
                  totals={totalCount}
                  callBack={this.reload}
                  selectedRowKeys={selectedRowKeys}
                  getSelectedRows={this.getSelectedRows}
                  getTableDataAction={this.getAcitonData}
                  isChecked={isChecked}
                  setPageConfig={this.setPageConfig}
                  defaultPageConfig={defaultPageConfig}
                  getPanelHeight={this.getPanelHeight}
                  rowClassName={this.rowClassName}
                  onRowClick={(record) => onEditClick(record)}
                />
                        

rowClassName = (record, index) => {
  let className = index % 2 ? 'back-01': 'back-02';
  return className
}

部分代码如下