lucccar
commented
2 years ago I've found that css overriding is a bit inconsistent. Something that sometimes works is to make a style for the rdt_ class alongside the table classname you create, like:
.dataTableComponent, .rdt_TableHeader {
// your style here
}where dataTableComponent is the class name I've putted in the DataTable component:
<DataTable
className={styles.dataTableComponent}
columns={columns}
data={data}
{...props}
/>
stale[bot]
I'm trying to apply background color to rdt_TableHeader but it is not applied. Can someone pls suggest what I'm doing incorrectly?
Styled.css
export const ReactDataTable = styled(DataTable).rdt_TableHeadRow { background-color: gray; };export const Expandable = () => { return ( <ReactDataTable columns={columns} data={data} expandableRows expandOnRowClicked highlightOnHover striped pointerOnHover expandableRowsComponent={ExpandedComponent} /> ); }; 