Can't remove white header in react-data-table-component

Question

I am trying to remove the white background in the header of a react-data-table-component.

I'm also fine with removing the header in its total, but also can't figure out how.

Below my code of the table component

    <DataTable                                  
        className="dataTables_wrapper"
        columns={this.columns()}
        data={data}
        progressPending={loading}
        pointerOnHover
        />

I tried to change the style of the component with this css code but it doesn't seem to work...

.dataTables_wrapper .rdt_TableHeader {
    background-color: blue
    color: blue;
}
.dataTables_wrapper .rdt_TableHead {
    background-color: blue;
    color: blue;
}

Example of how my table looks right now

Answer 1

You can use noHeader attribute.

 <DataTable                                  
    className="dataTables_wrapper"
    columns={this.columns()}
    data={data}
    progressPending={loading}
    pointerOnHover
    noHeader={true}
    />

Documentation

Answer 2

write css for .rdt_TableHeadRow to change background color.

.rdt_Table

.rdt_TableRow

.rdt_TableCol

.rdt_TableCol_Sortable

.rdt_TableCell

.rdt_TableHeader

.rdt_TableFooter

.rdt_TableHead

.rdt_TableHeadRow

.rdt_TableBody

.rdt_ExpanderRow

These are classes for css.