容器查詢

Material UI 提供了一個實用工具函式，用於基於主題斷點建立 CSS 容器查詢。

用法

若要建立 CSS 容器查詢，請使用 theme.containerQueries 以及 theme.breakpoints 中提供的任何方法。值可以是無單位（在這種情況下將以像素呈現）、字串或斷點鍵。例如

theme.containerQueries.up('sm'); // => '@container (min-width: 600px)'

具名包含上下文

若要參照包含上下文，請使用容器名稱呼叫 containerQueries 方法，以存取所有斷點方法

theme.containerQueries('sidebar').up('500px'); // => '@container sidebar (min-width: 500px)'

簡寫語法

當使用 sx prop 新增樣式時，請使用 @<size> 或 @<size>/<name> 標記法來套用容器查詢，而無需參照主題。

• <size>：寬度或斷點鍵。
• <name>（選用）：具名包含上下文。

注意事項

• @ 前綴詞加上無單位值會呈現為 px，因此 @500 等同於 500px，但 @500px 是不正確的語法，且無法正確呈現。

• 沒有數字的 @ 會呈現為 0px。

• 容器查詢必須共用相同的單位（尺寸可以以任何順序定義），如下所示

  // ✅ These container queries will be sorted correctly.
  padding: {
    '@40em': 4,
    '@20em': 2,
    '@': 0,
  }
  
  // ❌ These container queries won't be sorted correctly
  //    because 40em is typically greater than 50px
  //    and the units don't match.
  padding: {
    '@40em': 4,
    '@50': 2,
    '@': 0,
  }
  

  複製已複製（或 $keyC）

API

CSS 容器查詢支援斷點 API 中提供的所有方法。

// For default breakpoints
theme.containerQueries.up('sm'); // => '@container (min-width: 600px)'
theme.containerQueries.down('md'); // => '@container (max-width: 900px)'
theme.containerQueries.only('md'); // => '@container (min-width: 600px) and (max-width: 900px)'
theme.containerQueries.between('sm', 'lg'); // => '@container (min-width: 600px) and (max-width: 1200px)'
theme.containerQueries.not('sm'); // => '@container (max-width: 600px)'