テキストを太字に

Example#

Props#

NameTypeDefaultDescription
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を使用してください。