View on GitHubテキストを太字に
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| children required | ReactNode | - | 太字にするテキスト <p>や<div>などを子要素に指定しないでください（文法的にNGです） |
| as | "span" | "b" | "strong" | "em" | "i" | span | レンダリングされる要素 |
| id optional | string | - | ネイティブ要素の`id`属性。ページで固有のIDを指定 |
| data-* optional | string | - | Custom data attributes |
Feature#
- テキストを太字にします
- それ以外のスタイルは親要素の設定を継承します
<Text>コンポーネント内部の一部分のみを太字としたい場合に活用できます
Usage#
セマンティクスをもたせる#
デフォルトでは<span>としてレンダリングされるため、特別な意味をもちません。見た目を変えるだけです。任意の要素を指定することで、セマンティクスを持たせることができます。
次のケースでは、<strong>要素としてレンダリングされます。
<Bold as="strong">警告</Bold>
ただし、セマンティクスと持たせるには各要素のユースケースを理科する必要があります。as propで指定できる要素の扱いがわからない場合は、デフォルトのspanを使用してください。