自动调整

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>