reactjs CSS用于在React中为Ant Design表的一行着色

klsxnrf1 于 12个月前发布在 React

关注(0)|答案(4)|浏览(132)

下面是我使用的Ant Design样式的CSS：

File 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 在索引页中的使用方式。Files style.css 和 index.less 是CSS的页面。
我如何在这个页面上写一个CSS部分，使一行绿色颜色？
我想使一行绿色的基础上的条件。我需要的CSS。我需要调用的CSS在页面中的代码。

reactjs

来源：https://stackoverflow.com/questions/53220662/css-for-colouring-one-row-of-an-ant-design-table-in-react

4条答案

按热度按时间

9avjhtql1#

到目前为止，我找到了两种方法来做到这一点：
一种方法是使用Table的rowClassName属性：

.table-row-light {
    background-color: #ffffff;
}
.table-row-dark {
    background-color: #fbfbfb;
}

个字符
第二种方法是使用纯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。

赞(0）回复(0）举报 12个月前

hmmo2u0o2#

看看这些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('#', '')}

型

赞(0）回复(0）举报 12个月前

dy1byipe3#

我不是一个使用类名的粉丝，我看到没有人提到还有另一种更简单的方法，使用onRow prop：

<Table
   ...
   onRow={(record, index) => ({
     style: {
         background: record === 'something' ? 'red' : 'default',
     }
   })}
/>

字符串

赞(0）回复(0）举报 12个月前

xxb16uws4#

如果你想使用styled-components，你可以像这样 Package 它：

const StyledTable: React.FC<TableProps<T>> = styled(Table)`
  .ant-table-header th {
    background-color: green;
  }
`

export const Table = () => (
    <StyledTable
      columns={columns}
      dataSource={data}
      ...
    />

字符串

赞(0）回复(0）举报 12个月前

我来回答

reactjs CSS用于在React中为Ant Design表的一行着色

File style.css

文件 index.less

文件 index.js

4条答案

相关问题

热门标签

最新问答