Как изменить стиль заголовка с помощью ReactTable

Question

Мне нужно изменить стиль по умолчанию на стиль ниже

Answer 1

Обновите ссылку на css

В вашем классе замените import "react-table/react-table.css"; на import "../myPath/react-table-override.css";, чтобы использовать собственный измененный файл css, расположенный в [myPath].

Обновите css

Замените исходный css

.ReactTable .rt-thead .rt-th.-sort-asc,.ReactTable .rt-thead .rt-td.-sort-asc {
  box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);
}

.ReactTable .rt-thead .rt-th.-sort-desc,.ReactTable .rt-thead .rt-td.-sort-desc {
  box-shadow: inset 0 -3px 0 0 rgba(0,0,0,0.6);
}

на следующий css, чтобы удалить затенение по умолчанию и добавить стрелки юникода в конец заголовкаимена.

.ReactTable .rt-thead .rt-th.-sort-asc,.ReactTable .rt-thead .rt-td.-sort-asc {
  div:first-child:after {
    content: " ▴";
  }
}

.ReactTable .rt-thead .rt-th.-sort-desc,.ReactTable .rt-thead .rt-td.-sort-desc {
  div:first-child:after {
    content: " ▾";
  }
}

Answer 2

Я получил следующее для работы, скопировав response-table.css в новый файл, внеся изменения, как показано ниже, и импортировав новый файл везде, где используется response-table.

Первые две части избавляются от уродливой черной границы, а последние две добавляют соответствующие стрелки.

.ReactTable .rt-thead .rt-th.-sort-asc,
.ReactTable .rt-thead .rt-td.-sort-asc {
    box-shadow: inset 0 0px 0 0 rgba(0, 0, 0, 0.6)
}

.ReactTable .rt-thead .rt-th.-sort-desc,
.ReactTable .rt-thead .rt-td.-sort-desc {
    box-shadow: inset 0 0px 0 0 rgba(0, 0, 0, 0.6)
}

div.-sort-desc::after {
    content: " \25BC";
    float: right;
}

div.-sort-asc::after {
    content: " \25B2";
    float: right;
}

Answer 3

Попробуйте добавить следующий CSS.Вы должны правильно расположить стрелки.

rt-resizable-header -sort-desc:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content : ' ';
  border-top: 20px solid #000;
}

rt-resizable-header -sort-asc:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  content : ' ';
  border-bottom: 20px solid #000;
}
.ReactTable .rt-thead .rt-th.-sort-desc, .ReactTable .rt-thead .rt-td.-sort-desc {
    box-shadow: none;
}