How can I override colours and styles of components in Ant Design version 5

I have recently moved from V4 to V5 and followed the official documentation to do so. I had few styles overrides for Tables in V4. Like changed table header background colour and so on. But when I am trying to do the same in V5 using Config Provider, I can't completely achieve the same styles.

I am trying something like this

<ConfigProvider
  theme={{
     token: {
       ..
       ..
     }
     components: {
        Table: {
          tableBgColor: '#456578',
       },
     },
  }}
 >
  <Table
     ..
     ..
  />
</ConfigProvider>

But this doesn't work!!

The tableBgColor is actually an internal token used by Table component of ant-design. But I am not sure how to override it. Is there a way to override it?

I am trying something like this

<ConfigProvider
  theme={{
     token: {
       ..
       ..
     }
     components: {
        Table: {
          tableBgColor: '#456578',
       },
     },
  }}
 >
  <Table
     ..
     ..
  />
</ConfigProvider>

and I am expecting the table background color should change as tableBgColor is an internal token used by Table component of the ant design.

Solution

Currently as of Ant design version 5.3.3 you can't override the "Component Tokens" like tableBg that but you can override the color that gets set to tableBg which in this case is colorBgContainer. You can override this just for the table component

You can use https://ant.design/theme-editor to set your styles, and your choice is to set it globally or to override the table component by selecting "Components". If you override you end up with a JSON similar to this:

{
  "components": {
    "Table": {
      "colorBgContainer": "#456578"
    }
  },
  ...
}

There is an issue raised to override the component tokens directly https://github.com/ant-design/ant-design/issues/38975

As an update they are expected to add this in 5.6.0 according to https://github.com/ant-design/ant-design/issues/41884