修改antd默认样式的方法

问题的出现与解决

在博主还是小白的时候，觉得antd太好用了，组件多，效果好，真棒！
随着实习的进行，发现antd好用是好用，但是也有很多缺点，就比如，我想要antd的Button宽度和父组件一样宽，按照我之前的想法，这样就好了：

//js
<Button type='primary' className='button'>
//less
.button{
    width: 200px;
}

因为项目是热更新的嘛，页面上按钮长度没有发生变化，还抱有希望的我点了刷新，按钮还没变，完蛋，没用。赶紧google一下如何修改默认样式，在浏览器中右键检查，选中要修改样式的元素，看看它的类名是什么，比如我要修改的按钮，类名有一个是ant-btn，按照查到的方法这样改就可以，OK，放到less文件中

:global(.ant-btn) {
  background-color: red;
}

好家伙，页面上的按钮全都变红了，这可不是我想要的，继续查，发现原来需要在global外面加上一层限制的类名，比如这样：

//js
<Button
    type="primary"
    htmlType="submit"
    className={styles.button}
>创建</Button>
//less
.button{
  :global
  .ant-btn{
    padding: 0 215px;
    margin-top: 20px;
    background-color: #0A7AFF;
  }
}

嗯？还是没有生效，为什么呢，在这里博主苦思冥想了好久，最后才发现原来是要在外层加上一个标签，类名给这个标签加上才可以，比如这样：

//js
<div className={styles.button}>//类名给div
    <Button
        type="primary"
        htmlType="submit"
    >创建</Button>
</div>
//less
.button{
  :global
  .ant-btn{
    padding: 0 215px;
    margin-top: 20px;
    background-color: #0A7AFF;
  }
}

这样就成功的修改了antd的Button样式。

总结

antd的默认样式修改还是挺容易的，但是博主没有经验还是踩了不少坑，这就总结出来。
1、 在页面中检查选中要改变样式的元素，找到元素的类名
2、 在要改变元素的外层嵌套上一个div(别的也行)，加上自定义的类名。
3、 less文件用global修改默认样式
4、 举例：

//js
<div className={styles.button}>//类名给div
    <Button
        type="primary"
        htmlType="submit"
    >创建</Button>
</div>
//less
.button{
  :global
  .ant-btn{
    padding: 0 215px;
    margin-top: 20px;
    background-color: #0A7AFF;
  }
}

或

.red {
  :global(.ant-input) {
    color: #ff3a30;
  }
}