修改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

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

如果是，直接加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樣式結尾不要加分號