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