How do I change the style of the header using ReactTable

Question

I need to change the default style to the style below

Answer 1

one other solution would be to return a custom component in the header section.`

 const columns=[
      { 
        Header:()=><small className="my_custom_class">Name</small>,
        accessor:"name"
      }]`

Answer 2

I got the following to work, after copying react-table.css into a new file, amending as below and importing the new file wherever react-table is used.

The first two parts get rid of the ugly black border and the last two add the relevant arrows.

.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;
}