How to make the ant Table background color inherit or transparent?

Question

I can't set the background transparent or inherit to the parent header. I tried css and inline but it did not work. It worked only if the color is visible for example blue red green

here is my code

import { Table } from "antd";

const headerStyle = {
  background: "green",
  color: "blue",
};

const cellStyle = {
  background: "violet",
  color: "#fff",
};
function App() {
  return (
    <div style={{ background: "red" }}> // i put red. it supposed to be picture
      <Table
        dataSource={dataSource}
        columns={columns.map((column) => ({
          ...column,
          onHeaderCell: () => ({
            style: headerStyle,
          }),
          onCell: () => ({
            style: cellStyle,
          }),
        }))}

      />
    </div>
  );
}

export default App;