問題描述：

有時候你可能會遇到一些前端CSS實現上的問題，因為美工的畫圖與你的項目使用的UI框架的樣式大有出入，所以在寫頁面樣式的時候多多少少會讓你有些頭疼，那么該類問題應該如何解決呢？

---

原因分析：

提示：這里填寫問題的分析：
這種情況跟你的美工沒太接觸過前端UI框架也有一定關系，因為大部分美工他們只管好看，統一化標準即可，但是前端就難受了，在緊張的開發時間里面，如果沒有現成可復用的輪子，那么你就要從頭開始去畫輪子，等你畫完這個輪子還得測這個輪子的兼容性等等，問題多到你無法想象。所以，如果修改現有輪子的樣式成了快速解決前端UI界面的一大手段。

---

解決方案：

方法非常簡單，比如我使用的是螞蟻金服的ant design mobile的樣式，我現在使用一個簡單Search組件，打開網頁，按下F12，選中搜索框組件查看它的CSS樣式，如下圖

比如你要改變搜索框的高度之類的，你可以現在網頁上調試樣式，一層層樣式往下找，看哪個樣式屬性是控制你想要的內容的，找到之后回到頁面對應的CSS代碼里，然后添加全局覆蓋樣式，如下：

只要把對應的屬性名丟到局部CSS里面，就可以實現覆蓋原有的框架樣式，如果你想整個APP都覆蓋這種樣式，那你就應該去項目入口處的CSS文件寫這些代碼，否則，就在覆蓋樣式位于的頁面模塊便攜這些內容。

總結

以上是生活随笔為你收集整理的如何修改ant design mobile或者其他UI组件的全局样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。