005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
63 lines
2.1 KiB
Markdown
63 lines
2.1 KiB
Markdown
# Automatic adjustment
|
||
|
||
<p class="description">Joy UI components adapt to one another to ensure consistency across your app without the need to micromanage your CSS.</p>
|
||
|
||
Joy UI components automatically adjust their styles and DOM structure relative to one another to ensure consistent sizing, spacing, and semantically appropriate HTML throughout your app.
|
||
|
||
This makes it much faster and more efficient for you to apply pixel-perfect adjustments to your UI without having to worry about minor inconsistencies between components.
|
||
|
||
## Style adjustments
|
||
|
||
Joy UI components adapt their styles relative to the context in which they're rendered.
|
||
You can see a few examples of this below.
|
||
|
||
### Input
|
||
|
||
When using icons or buttons within an Input component, Joy UI automatically adjusts their size:
|
||
|
||
{{"demo": "InputIntegration.js"}}
|
||
|
||
If you customize their respective CSS variables, Joy UI ensures that their spacing and radii follow those of the Input:
|
||
|
||
{{"demo": "InputVariables.js"}}
|
||
|
||
### List
|
||
|
||
Nested lists are a common source of frustration when it comes to styling.
|
||
Joy UI's meaningful variables are intended to simplify this process.
|
||
|
||
Play around with different presets in the demo below to see which CSS variables are customized:
|
||
|
||
{{"demo": "ListThemes.js"}}
|
||
|
||
## Structure adjustments
|
||
|
||
Joy UI components adjust their DOM structure based on their context to ensure that the appropriate HTML tags are used.
|
||
Check out a few examples below:
|
||
|
||
### Typography
|
||
|
||
The Typography component renders as a `<p>` tag by default.
|
||
When a second Typography component is nested inside, it will automatically render as a `<span>`, which is the correct markup in this situation:
|
||
|
||
```js
|
||
<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
|
||
|
||
The List Item component renders as an `<li>` tag by default.
|
||
If its parent List component is not a `<menu>`, `<ul>`, or `<ol>`, then the List Item will correct itself and render as a `<div>` instead.
|
||
|
||
```js
|
||
<List component="div">
|
||
<ListItem> // automatically renders as a <div>
|
||
...
|
||
</ListItem>
|
||
</List>
|
||
```
|