JSXスタイル付けの基本

1. インラインスタイル付け: 最も基本的な方法は、要素のstyle属性を使用してスタイルを直接指定することです。以下は例です。

const MyComponent = () => {
  const styles = {
    color: 'red',
    fontSize: '16px',
    fontWeight: 'bold',
  };
  return <div style={styles}>Hello, World!</div>;
};

2. クラス名を使用したスタイル付け: CSSクラスを定義し、要素のclassName属性を使用してスタイルを適用する方法もあります。以下は例です。

import './styles.css';
const MyComponent = () => {
  return <div className="my-class">Hello, World!</div>;
};

/* styles.css */
.my-class {
  color: blue;
  font-size: 18px;
  font-weight: bold;
}

3. CSS-in-JSライブラリの使用: CSS-in-JSライブラリを使用すると、JavaScript内でスタイルを定義し、それをコンポーネントに直接適用することができます。有名なライブラリにはstyled-componentsやemotionがあります。以下はstyled-componentsの例です。

import styled from 'styled-components';
const StyledDiv = styled.div`
  color: green;
  font-size: 20px;
  font-weight: bold;
`;
const MyComponent = () => {
  return <StyledDiv>Hello, World!</StyledDiv>;
};

以上がJSXスタイル付けの基本的な方法といくつかのコード例です。選択した方法によって、コンポーネントをスタイル付けするための柔軟性とパフォーマンスが異なることに注意してください。