antd修改默認樣式

修改antd樣式流程

比如我要修改控件A:

首先要去找控件A的api :

如果提供api可以修改樣式，則可以通過api直接修改。

如果不提供api的話，可以通過className的方式來修改樣式。

<Menu.Item 
  key="xxx"
  className={`${style['menu-item']}`}
  style={{backgroundColor: '#e6e6e6' }}
  > 
</Menu.Item>

如上所述，通過style修改，或者css-loader的形式通過添加className來做限定。

還有一種情況，控件是由兩個或兩個以上的原生控件組成的。比如樹節點TreeNode就是由兩個span組成的。我們只想修改其中一個span的屬性，這個時候就要通過global的方式來設定了。
舉個例子

可能有人會覺得這個間距太大了，而細看我們生成這個條目的時候，小三角和後面的文字是一個整體<TreeNode>來實現渲染的。調試的時候可以看到這兩個分別是兩個Span實現的。

看他們的css樣式：

這個時候又分兩種情況，我需要這個作用域是全局的嗎？

如果是，直接加global限定，由於antd是異步加載，所以一般找一個比較大的父級（比如所有元素都在body中），書寫方式如下：

.body :global(.ant-tree li .ant-tree-node-content-wrapper) {
    padding: 3px 5px 3px 0;
}

如果只需要作用於你的小區域，那麼就加一個外部距離較近的css來做限定：比如外部有個div叫block

.body .block :global(.ant-tree li .ant-tree-node-content-wrapper) {
    padding: 3px 5px 3px 0;
}

這樣就只會作用於你的模塊了。

注意兩點

1. global後面不要加空格

2.css樣式結尾不要加分號