自動調整

Joy UI 元件彼此互相適應，以確保您的應用程式整體一致性，無需微調您的 CSS。

Joy UI 元件會自動調整彼此之間的樣式和 DOM 結構，以確保整個應用程式中一致的尺寸、間距和語意上適當的 HTML。

這讓您能夠更快速且有效率地將像素完美的調整應用於您的 UI，而無需擔心元件之間細微的不一致之處。

樣式調整

Joy UI 元件會根據其呈現的上下文調整其樣式。您可以在下方看到一些範例。

輸入框

在 Input 元件中使用圖示或按鈕時，Joy UI 會自動調整它們的大小

如果您客製化它們各自的 CSS 變數，Joy UI 會確保它們的間距和圓角半徑與 Input 的設定一致

--Input-radius

--Input-decoratorChildHeight

列表

巢狀列表在樣式設計方面通常是令人沮喪的來源。Joy UI 具有語義化的變數旨在簡化此流程。

在下面的演示中試用不同的預設值，看看哪些 CSS 變數被客製化

選單項目 1
選單項目 2
- 選單項目 2.1
- 選單項目 2.2

變更預設值

// The code is shorten to show only the markup and the sx value.
<List>
  <ListItem nested>
    <ListItemButton>...</ListItemButton>
    <List>
      <ListItem nested>
        <ListItemButton>...</ListItemButton>
        <List>
          <ListItem>...</ListItem>
          <ListItem>...</ListItem>
        </List>
      </ListItem>
      <ListItem>...</ListItem>
      <ListItem>...</ListItem>
    </List>
  </ListItem>
  <ListItem>...</ListItem>
</List>

結構調整

Joy UI 元件會根據其上下文調整其 DOM 結構，以確保使用適當的 HTML 標籤。查看以下一些範例

排版

Typography 元件預設以 <p> 標籤呈現。當第二個 Typography 元件巢狀於其中時，它會自動以 <span> 呈現，這是這種情況下正確的標記方式

<Typography> // the parent Typography renders as a <p>
  This is a very
    <Typography fontWeight="lg">important</Typography> // the child renders as a <span>
  message.
</Typography>

列表項目

List Item 元件預設以 <li> 標籤呈現。如果其父 List 元件不是 <menu>、<ul> 或 <ol>，則 List Item 將自行更正並以 <div> 呈現。

<List component="div">
  <ListItem> // automatically renders as a <div>
    ...
  </ListItem>
</List>