Automatic adjustment

Joy UI components adapt to one another when composed together to ensure the best look and feel.

When composing a UI of multiple, especially nested, components, oftentime you get small inconsistencies between them. That's probably when you'll be adjusting pixels by a few nudges here and there to get them just right. Over time, these small and arbitrary changes build up to become a problem.

That's why we've built Joy UI to heavily rely on CSS variables, assigning to them the heavy lifting for these small adjustments. It saves you time and ensures consistency. Let's look through a few examples:

Examples of style adjustments

Input

When using icons or buttons within an Input, Joy UI will automatically adjust their size.

If you customize their CSS variables, Joy UI secures that their spacing and radii follow those of the input.

--Input-radius

--Input-childHeight

List

Nested lists are a common source of frustration when it comes to styling. Joy UI's meaningful variables take care of that for you.

Play around with different presets to see which CSS variables are customized.

Menu item 1
Menu item 2
- Menu item 2.1
- Menu item 2.2

Change the preset:

// 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>

Ensuring semantic HTML

Joy UI components will also adapt the HTML tag that a given component is rendered with based on the context that they are in. For example:

This nested Typography component will automatically render as a span when in this situation (which is the correct markup):

<Typography> // 👈 the parent Typography, by default, renders as a <p>
  This is a very
    <Typography fontWeight="lg">important</Typography> // automatically renders as <span>
  message.
</Typography>

The ListItem component, which is by default a li tag, will render as a div if its parent List is not rendered as one of these options: ul, ol, and/or menu－following then, the correct semantics:
```
// in cases that you want the same styles as list but not the `ul` tag.
<List component="div">
  <ListItem> // automatically rendering as <div>
    ...
  </ListItem>
</List>
```