React でインライン CSS 疑似要素 (::after など) を実装するにはどうすればよいですか?

React のインライン CSS 疑似要素

React コンポーネントを開発するとき、CSS 疑似クラスをインラインで追加する必要が生じる場合があります。ただし、React は、::after.

のような疑似要素にプロパティを直接適用することをネイティブにサポートしていません。この課題を克服するために、React はコンポーネントベースのアーキテクチャを利用します。 CSS の ::after を使用して新しい要素を作成する代わりに、React を介して新しい要素を作成する必要があります。カスタム React コンポーネントは、この動作をカプセル化できます。

position や -webkit-filter などの追加のプロパティを疑似要素に適用するには、スタイル オブジェクトが使用されます。 -webkit-filter のような特殊な属性の場合、ダッシュが削除され、次の文字が大文字になります (WebkitFilter など)。

たとえば、必要な要素を含む ::after 要素を追加する React コンポーネントを作成するには、プロパティ:

class PseudoElement extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
        <div>

このコンポーネントは、親コンポーネント内で次のように使用できます。

render() {
  return (
    <PseudoElement>
      <span>Something</span>
    </PseudoElement>
  );
}

このアプローチにより、React にインライン CSS 疑似要素を追加できるようになり、コンポーネントのスタイルに対する柔軟性と制御が向上します。

以上がReact でインライン CSS 疑似要素 (::after など) を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。