When Table ellipsis attr is assigned `true` will show black text box. How can I change styled for textbox background color?

Question

I used

<Table {...props} ellipsis={true} />

from Ant Design

It will show textbox when I hold the mouse on the table cell that text-overflow

And then the problem is I cannot use right-click or press CTRL + SHIFT + C on this textbox to styled CSS.

I need to change the background and text color.
How to do that?

My environment

1. Browser to develop a web it is google chrome
2. Ant design V.3
3. Styled Component

Answer 1

I already fixed this problem.
I passed columns props with render property. such as
render(): (_, record) => (<Popover trigger="hover">{record.value}</Popover>)

Code

const MyTable = props => {
   .
   .

  const columns = [
     .
     .
    { ... },
    { ... },
    {
      dataIndex: 'description',
      key: 'description',
      render: ((_, record) => (
        <Popover trigger="hover" placement="topLeft" content={record.description}>{record.description}</Popover>
      ))
    },
    { ... },
    { ... },
     .
     .
  ]

  return (
    <Table {...props, columns} />
  )
}

Now I can custom antd className by my styled component.
Yeah!!