How to change the style of an ant.design 'Table' component?

Question

I have a table at the moment and I want to change the column headers of the tables to a different color.

link to table

Things I've tried:

1. <Table className="ant-table-thead">
    ...
   </Table>
   

2. <Table className="ant-table-content">
   ...
   </Table>
   

Inside of a css file, I put:

.ant-table-content {
  background-color: rgb(127, 127, 127);
  color: rgb(127, 127, 127);
 }

I would love some help styling this particular Table component, but if you could also give me a general guideline (or somewhere I could find all of the possible className) of how to style other components in ant.design, it would be much appreciated.

Answer 1

so I found out that the general idea was right. For each html component like the Table, it's common practice to define a className. Because I'm using Ant-Design, I have to have specific classNames. These classNames can be found in the node_modules folder in client, inside antd/es and whatever specific component in use. Then, the index.css file lists out all of the classNames and the specific attributes that are editable.