最详细的修改antd组件的默认样式

对于antd库的我们都很熟悉,但也有很多业务要求去修改里面的样式.

示例:比如这个一个很正常的按钮,我想要控制它的大小和颜色.

最详细的修改antd组件的默认样式_第1张图片

看到组件button上面是带着两个class的

 最详细的修改antd组件的默认样式_第2张图片

 先来控制他的大小

我的元素结构

 

修改的代码段

.contain {
  .btn {
    margin-top: 60px;
    margin-left: 60px;
    :global {
      .ant-btn {
        width: 200px;
        height: 100px;
        border-radius: 6px;
      }
    }
  }
}

结果:

最详细的修改antd组件的默认样式_第3张图片

 

你可能感兴趣的:(前端,javascript,开发语言)