MUI 系統 - 概述

MUI 系統是一組 CSS 工具程式，可協助您更有效率地建構自訂設計。它讓快速佈局自訂設計成為可能。

簡介

MUI 系統是一組 CSS 工具程式，可協助您更有效率地建構自訂設計。它在內部被 Material UI、Joy UI 等函式庫使用。它也可以用來設定 MUI Base 元件的樣式。

MUI 系統為您提供一組彈性、通用的包裝函式元件，例如 Box 和 Container，可以使用 sx 屬性快速自訂。這個屬性讓您可以直接在元件本身內定義樣式，而無需使用 styled-components 建立笨重且多餘的 const 定義。它還讓您可以直接存取主題的自訂設計令牌，以確保一次性樣式的一致性。在 sx 屬性頁面了解更多資訊。

MUI 系統的優點

• 減少程式碼編寫： 在 styled-components 會顯得過於繁瑣的情況下，sx 屬性可以取代數十行程式碼。
• 編寫您已經熟悉的 CSS： sx 屬性具有 CSS 的超集，因此如果您熟悉 CSS，就可以直覺地開始使用。
• 避免情境切換： 使用 styled-components，您經常需要在用法和定義之間跳轉才能找到您需要的內容。使用 MUI 系統，所有內容都在同一個地方。
• 忘記不必要的自訂名稱： 如果您曾經苦苦掙扎為 styled-component 想出一個好名字，那麼您會喜歡在使用 MUI 系統時完全跳過這個步驟。

MUI 系統 vs. MUI Base

MUI Base 是一個「無樣式」React 元件的函式庫，而 MUI 系統是一組工具程式，用於快速將樣式應用於這些元件（以及我們的其他元件函式庫，如 Material UI 和 Joy UI）。

MUI Base 是一個獨立的元件函式庫，而 MUI 系統是補充性的，因為它被設計為與 MUI Base 或任何第三方元件搭配使用。請參閱自訂元件頁面，以了解如何使用 MUI 系統的詳細資訊。