Ant design pro global无法覆盖样式

Question

在使用Card组件的Meta时，想要给avatar插入图片，并将圆形框改为方形框来显示图片，如图一所示

去掉圆角

检查元素中查看style代码，主要是想覆盖掉.ant-avatar中的border-radius，如图二所示

其中，该元素对应的类名显示为（图三）

应该是包含三个类名.ant avatar .ant-avatar-circle .ant-avatar-image,但是styles代码部分只有.ant avatar和.ant-avatar-image两个，如图二所示

新建一个style.less,写入样式如下

.Avater{
  :global{
      .ant-avatar{
        border-radius:0px
      }
    }
  }

页面引入样式文件
import styles from '../style.less';

使用

                    <Card
                        // bordered={false}
                        style={{background:'linear-gradient(to bottom right, #019a95 , #00afaa)'}}
                        
                    
                    >
                        <Card.Meta
                            
                            avatar={
                                <Avatar src={node} className={styles.Avatar}/>      //覆盖样式
                            }

                            title="20个"
                            description="Node"
                        />

                    </Card>

但是完全没有效果，并没有被覆盖，请问这个应该怎么解决呢？

Answer 1

我知道怎么回事了，这个ant-avatar是隶属于ant-card-meta-avatar下面的类名，ant-avatar单指所有的avatar，必须要再套一层ant-card-meta-avatar才能生效