Kendo UI致力于新的開發，來滿足不斷變化的需求，通過React框架的Kendo UI JavaScript封裝來支持React Javascript框架。Kendo UI for React能夠為客戶提供更好的用戶體驗，并且能夠更快地構建更好的應用程序。

開發人員在應用程序主題色的選擇上，往往會注重品牌影響力，因此可能重新設計皮膚的整個庫或做一些定制設計。Kendo UI for React很容易改變組件的外觀和樣式，本文介紹四種不同的方法來改變主題風格。

Kendo UI R3 2022正式版下載

事實上，這四種方法的選擇取決于開發人員的個人偏好，是喜歡編寫CSS還是更改范圍會涉及更廣，下面的流程圖可以知道開發者完成選擇。

Sass變量

自定義Sass變量是推薦給擁有專門前端專家團隊的方法。

當完全掌握CSS知識后，有時打開文件并開始進行調整會更快。官方技術團隊使用Sass進行主題化，并有意公開這些變量供開發人員使用，因此您可以使用與官方相同的方法進行自定義。

每個KendoReact主題包都包含主題的源文件，它為開發人員提供作為構建過程的一部分來修改和重新構建主題的選項。例如開發人員可以更改主題顏色，刪除未使用組件的CSS，或使用特定的主題顏色來設置應用程序的樣式，主題源文件位于主題包的scss文件夾中。

Figma Kits

Figma UI Kits是為擁有專門設計師的團隊推薦的方法。

UI kit是UI設計的所有元素集合，包括(但不限于)字體、顏色、圖標、組件設計文件和文檔。它們本身很有用，既可以作為文檔的形式，也可以通過提供一組可在新設計中重用的基本元素來加快設計進程，但當與現有組件庫結合時尤其強大——例如。

在這種情況下，開發人員正在使用的組件和設計人員正在使用的組件之間有完美的1比1的相關性。

Figma Kits提供了一個內部視角，讓設計師了解所有100多個組件是如何設計的，包括它們所有不同的用戶交互狀態和設計原則。這讓設計師對組件的工作方式有了更好的理解，以及從最小的標記到最復雜的組件，可視化風格是如何進行的。

UI Kits 使用Figma組件，允許設計師在基礎組件或令牌級別進行更改，并立即看到整個KendoReact組件套件的編輯。

Figma中的所有設計標記都與上面提到的Sass變量完全匹配，這使得實現變得簡單，命名沖突/誤解成為過去。

Swatches（調色板）

對于希望對現有主題進行最小的、基于顏色更改的團隊，或與現有設計系統如Bootstrap、Material或Fluent)相匹配的團隊，我們推薦使用Swatches（調色板）。

Swatch是一組自定義主題外觀的變量——開發人員可以常見自己的，或者從Kendo UI 設計團隊創建的14個不同的調色板中選擇一個。

調色板對于創建多個持久的主題變化非常有用，CSS輸出文件可以跨項目共享，不需要進一步處理。

當您在文檔中查看任何組件時，可以使用右上角的下拉菜單預覽不同預先制作的swatch（調色板），按主題分類。有三個主要設計系統的主題——Material, Bootstrap和Fluent。

ThemeBuilder Pro

ThemeBuilder Pro是推薦給那些想要使用WYSIWYG接口進行設計更改并直接導出代碼的團隊的方法。

ThemeBuilder是一個web應用程序，允許開發人員快速自定義和樣式化庫中的任何組件。這是一種有效的方法，可以在整個庫中進行表面級別的更改，然后導出該代碼來在應用程序中使用。

然而，ThemeBuilder的這個早期版本僅限于更新基本顏色和導出CSS或Sass變量——這對于只需要更新KendoReact組件來使用自己品牌顏色的團隊很有用，但對于需要完全自定義樣式的用戶來說還不夠。

ThemeBuilder Pro的功能是對所有組件的所見即所得(WYSIWYG)編輯器，允許開發人員或設計人員深入研究并定制每個組件的細節——而不涉及任何CSS或Sass。

新ThemeBuilder Pro的用戶仍然可以像以前一樣，在左邊欄進行快速和簡單的顏色更新。您還可以在此面板中更新字體和邊框半徑設置，這將立即應用于整個庫。

設置了這些值之后，就可以開始研究這些設置在所有組件中的外觀了。如果開發人員想調整的列表中不包含（如填充或空白、更細粒度的文本設置、對齊和對齊、大綱、效果等），那么新的高級編輯面板將帶開發者瀏覽這些選項。

開發人員可以分享自己的ThemeBuilder Pro主題，通過實時編輯組件進行協作，或者跨產品團隊進行共享，以便每個人都可以導出相同的CSS和Sass文件，從而在應用程序套件中實現真正一致的外觀和樣式。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論