容器查询

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 属性添加样式时，请使用 @<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)'