React Styled Componentsで子コンポーネントにスタイルを直接定義
2024-07-27
React で子コンポーネントにクラスを追加する方法
props を介して渡す
親コンポーネントから子コンポーネントに className プロパティを props として渡し、子コンポーネント内で動的にクラスをセットする方法です。
// 親コンポーネント
import ChildComponent from './ChildComponent';
function ParentComponent() {
return (
<div>
<ChildComponent className="my-class" />
</div>
);
}
// 子コンポーネント
function ChildComponent(props) {
return (
<div className={props.className}>子コンポーネント</div>
);
}
この方法では、親コンポーネントから任意のクラスを子コンポーネントに付与することができます。
Styled Components を利用する
Styled Components ライブラリを用いると、コンポーネントにスタイルを直接定義することができ、CSS コードをカプセル化することができます。
import styled from 'styled-components';
const MyButton = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
`;
function ChildComponent() {
return (
<MyButton>ボタン</MyButton>
);
}
この方法では、子コンポーネントごとにスタイルを定義することができ、コードの可読性とメンテナンス性を向上させることができます。
上記以外にも、以下のような方法で子コンポーネントにクラスを追加することができます。
- BEM や SUIT などの CSS アーキテクチャを活用する
- CSS モジュールを使用して、コンポーネント固有のスタイルを定義する
classNamesライブラリを使用して、複数のクラスを動的に生成する
注意点
- Styled Components を利用する場合は、パフォーマンスやバンドルサイズに影響を与える可能性があるため、適切に使用する必要があります。
className属性は、HTML 標準の属性であるため、他のライブラリや属性と競合する可能性があることに注意する必要があります。
// 親コンポーネント
import ChildComponent from './ChildComponent';
function ParentComponent() {
return (
<div>
<ChildComponent className="my-class" />
<ChildComponent className="another-class" />
</div>
);
}
// 子コンポーネント
function ChildComponent(props) {
return (
<div className={props.className}>子コンポーネント - {props.className}</div>
);
}
import styled from 'styled-components';
const MyButton = styled.button`
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
`;
const MyRedButton = styled(MyButton)`
background-color: red;
`;
function ChildComponent() {
return (
<div>
<MyButton>ボタン</MyButton>
<MyRedButton>赤いボタン</MyRedButton>
</div>
);
}
classNames ライブラリは、複数のクラス名を動的に生成して、className 属性にセットするのに役立ちます。
import classNames from 'classnames';
function ChildComponent() {
const baseClass = 'my-class';
const additionalClass = isSpecial ? 'special' : '';
return (
<div className={classNames(baseClass, additionalClass)}>
子コンポーネント
</div>
);
}
この方法では、条件に応じて動的にクラスを切り替えることができます。
CSS モジュールを使用する
CSS モジュールは、コンポーネント固有のスタイルを定義し、名前空間衝突を回避するのに役立ちます。
// styles.module.css
.my-class {
background-color: blue;
color: white;
padding: 10px 20px;
}
.special {
background-color: red;
}
import styles from './styles.module.css';
function ChildComponent() {
const baseClass = styles.myClass;
const additionalClass = isSpecial ? styles.special : '';
return (
<div className={classNames(baseClass, additionalClass)}>
子コンポーネント
</div>
);
}
この方法では、スタイルをコンポーネントから切り離し、コードの可読性とメンテナンス性を向上させることができます。
BEM や SUIT などの CSS アーキテクチャは、コンポーネントの構造とスタイルを明確に定義し、スケーラブルで保守しやすい CSS コードを作成するのに役立ちます。
// bem.module.css
.button {
&__block {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
&__element {
display: inline-block;
margin: 5px;
}
&__modifier--red {
background-color: red;
}
}
import styles from './bem.module.css';
function ChildComponent() {
const baseClass = styles.button;
const additionalClass = isSpecial ? styles.modifierRed : '';
return (
<div className={classNames(baseClass, baseClass__block, additionalClass)}>
<span className={baseClass__element}>ボタン</span>
</div>
);
}
これらの方法は、より複雑なコンポーネントや、より多くのスタイルを扱う場合に有効です。
上記で紹介した方法は、それぞれ利点と欠点があります。状況に応じて適切な方法を選択することが重要です。
- BEM や SUIT などの CSS アーキテクチャは、スケーラブルで保守しやすいですが、習得に時間がかかる場合があります。
- CSS モジュールは、スタイルをカプセル化できますが、設定が複雑になる場合があります。
classNamesライブラリはシンプルで使いやすいですが、複雑なロジックになると冗長になりがちです。
reactjs
