Как добавить указатель мыши на элементы списка Ant Design

Question

Я довольно новичок в ant design и хочу знать, как добавить эффект наведения мыши для показанного ниже фрагмента кода из примера списка antd. https://ant.design/components/list/#components -list-demo-vertical

<List
    itemLayout="vertical"
    size="large"
    pagination={{
      onChange: page => {
        console.log(page);
      },
      pageSize: 3,
    }}
    dataSource={listData}
    footer={
      <div>
        <b>ant design</b> footer part
      </div>
    }
    renderItem={item => (
      <List.Item
        key={item.title}
        actions={[
          <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
          <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
          <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
        ]}
        extra={
          <img
            width={272}
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
        }
      >
        <List.Item.Meta
          avatar={<Avatar src={item.avatar} />}
          title={<a href={item.href}>{item.title}</a>}
          description={item.description}
        />
        {item.content}
      </List.Item>
    )}
  />

Answer 1

Для этого нет реквизита, выберите класс элемента и добавьте свой стиль. например, добавьте этот код в файл css.

.ant-list-item:hover {
  box-shadow: 0 0 4px #eee;
}