Ant design pro global无法覆盖样式

user_tYDk6iCh
  • 66

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

image.png 去掉圆角 image.png

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

其中,该元素对应的类名显示为(图三)
image.png
应该是包含三个类名.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>

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

回复
阅读 1.9k
1 个回答

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

宣传栏