CSS для раскраски одной строки таблицы antd в React

Это CSS для стиля antd, который я использую

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 }}                   
                />

Вот как Стол используется на странице индекса. style.css и index.less - это страницы для CSS.

Может ли кто-нибудь помочь мне написать один CSS на этой странице, чтобы сделать одну строку зеленым цветом? Я хочу сделать одну строку зеленой в зависимости от условия. Мне нужен CSS Мне нужно вызвать CSS на странице, где находится код

добавить активный класс на основе условия и добавить CSStr.active { background-color: green;}

Mehraj Khan 09.11.2018 07:39
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
11
1
28 084
2

Ответы 2

Посмотрите, помогут ли вам эти ссылки Jsfiddle. Они показывают 2 способа изменить цвет фона ваших строк.

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

Как отключить :hover для таблицы antd?

Amanda 21.06.2019 13:30

Можем ли мы сделать это и для заголовков?

P-RAD 20.11.2019 13:24

@ P-RAD Я не пробовал, но думаю, что можем. Вы также можете напрямую изменить CSS, выбрав .antd-table-head.

Prakhar Mittal 07.01.2020 12:32

Примите этот ответ, чтобы другой разработчик тоже знал ответ.

Prakhar Mittal 01.03.2020 14:35

На данный момент я нашел два способа сделать это:

Один из способов - использовать опору rowClassName таблицы:

.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, как указано выше.

Другие вопросы по теме