---
title: スタイル
description: "すべてのコンポーネントは、propsを使用してスタイリングができるように設計されています。"
---

## 概要

ライブラリが提供する主要な概念のリストはこちらです。

- [Style Props](https://yamada-ui.com/docs/styling/style-props.md)
- [条件付きスタイル](https://yamada-ui.com/docs/styling/conditional-styles.md)
- [レスポンシブデザイン](https://yamada-ui.com/docs/styling/responsive-design.md)
- [カラーモード](https://yamada-ui.com/docs/styling/color-mode.md)
- [カラースキーム](https://yamada-ui.com/docs/styling/color-scheme.md)
- [CSS値関数](https://yamada-ui.com/docs/styling/css-value-functions.md)
- [インターポレーション](https://yamada-ui.com/docs/styling/interpolation.md)
- [アニメーション](https://yamada-ui.com/docs/styling/animation.md)
- [フォーカスリング](https://yamada-ui.com/docs/styling/focus-ring.md)
- [グローバルスタイル](https://yamada-ui.com/docs/styling/global-styles.md)
- [リセットスタイル](https://yamada-ui.com/docs/styling/reset-styles.md)
- [レイヤースタイル](https://yamada-ui.com/docs/styling/layer-styles.md)
- [テキストスタイル](https://yamada-ui.com/docs/styling/text-styles.md)
- [アットルール](https://yamada-ui.com/docs/styling/at-rules.md)
- [カスケードレイヤー](https://yamada-ui.com/docs/styling/cascade-layers.md)

## 使い方

[Style Props](https://yamada-ui.com/docs/styling/style-props.md)は、propsを使用して要素にスタイルを適用します。Style Propsは、[CSSプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/Properties)に準拠しており、すべてのプロパティをキャメルケースで提供しています。

```tsx
<Box p="md" bg="bg.contrast" color="fg.contrast">
  Box
</Box>
```

:::note
[Style Props](https://yamada-ui.com/docs/styling/style-props.md)は、[@mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)を使用しています。ライブラリが更新されると、Style Propsも定期的に更新が行われます。
:::