Как мы можем настроить компонент «Заголовок таблицы дизайна муравьев»?

У нас есть требование, в котором нам нужно показать функцию «Скрыть / показать» столбцы в заголовке таблицы, а также мы хотим предоставить другой цвет заголовку таблицы в дизайне муравьев. Кто-нибудь может мне помочь, как мы можем это сделать? Я не нашел никакого элемента управления, чтобы сделать это, так как рендеринг заголовка является полностью внутренним для компонента.


reactjs antd
person kalpana pagariya    schedule 22.06.2017    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Вы можете использовать атрибут <Table.Column title={<...any react node...>}> в сочетании с обычным CSS.

person Jesper We    schedule 22.06.2017

arrow_upward
15
arrow_downward

То, что я пытался решить проблему цвета фона заголовка, - это перезапись класса стиля муравья, как показано ниже.

thead[class*="ant-table-thead"] th{
  background-color: yellow !important;
}

Я не уверен, что это правильно или нет. antd должен предоставить свойство Table для настройки стиля заголовка.

Есть ли другой способ сделать это лучше?

person kalpana pagariya    schedule 23.06.2017
comment
Это то, что я имел в виду под обычным CSS, и это, безусловно, правильный способ сделать это. Нет смысла добавлять атрибуты уровня компонента, чтобы делать то же самое, что вы уже можете сделать в CSS. Это просто сделало бы API излишне раздутым. - person Jesper We; 24.06.2017
comment
Вы можете добавить свой собственный className="xxx", если не хотите переопределять классы antd. - person Jesper We; 24.06.2017
comment
@kalpana_pagariya Два года спустя я столкнулся с аналогичной проблемой с настройкой таблиц antd - не могли бы вы рассказать, как вы перезаписали класс стиля antd? - person B--rian; 08.10.2019

arrow_upward
0
arrow_downward

Решение, предложенное kalpana, у меня не сработало. Что работало (Ant V4.10.x), так это:

thead > tr > th {
  background-color: yellow;
}

Обратите внимание, что настройка !important не требуется для выполнения этой работы.

Точно так же, если вы хотите настроить таргетинг на ячейки таблицы, вы можете использовать:

tbody > tr > td {
  background-color: yellow;
}
person JESii    schedule 14.04.2021