Reactにおけるスタイリングのモダンなアプローチ

Inline スタイリング: Reactコンポーネント内でスタイルを直接指定する方法です。以下の例では、styleプロパティを使用してスタイルを設定しています。

import React from 'react';
const MyComponent = () => {
  const style = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
  };
  return <div style={style}>Hello, React!</div>;
};

CSS-in-JS: CSS-in-JSは、JavaScript内でCSSを定義する方法で、Reactとの統合がシームレスに行えます。代表的なライブラリとしては、Styled-componentsとEmotionがあります。

Styled-componentsの例:

import React from 'react';
import styled from 'styled-components';
const StyledDiv = styled.div`
  background-color: blue;
  color: white;
  padding: 10px;
`;
const MyComponent = () => {
  return <StyledDiv>Hello, React!</StyledDiv>;
};

Emotionの例:

import React from 'react';
import { css } from '@emotion/react';
const style = css`
  background-color: blue;
  color: white;
  padding: 10px;
`;
const MyComponent = () => {
  return <div css={style}>Hello, React!</div>;
};

CSS Modules: CSS Modulesは、ReactコンポーネントとCSSを紐づける方法です。CSSファイル内のクラス名が一意になるため、スタイルの衝突を回避できます。

import React from 'react';
import styles from './MyComponent.module.css';
const MyComponent = () => {
  return <div className={styles.container}>Hello, React!</div>;
};

上記のスタイリングアプローチはReactにおける一部のモダンな方法です。選択するアプローチは、プロジェクトの要件や個人の好みによって異なります。お好みの方法を選んで、魅力的でユーザーフレンドリーなReactアプリケーションを構築してください。