【初心者】Reactのスタイルのあて方

Inline Style

export const App = () => {
  return (
    <>
      <p style={{ color: "red" }}>こんにちは</p>
    </>
  );
};

波カッコの一つはJavaScriptの記述のため、中の波カッコはオブジェクト

colorというプロパティの値は文字列でないといけないので値の部分は””で囲みます

変数として用意する書き方

export const App = () => {
  const contentStyle = {
    color: "red"
  };
  return (
    <>
      <p style={contentStyle}>こんにちは</p>
    </>
  );
};

注意

CSSと違いfont-sizeのようにハイフンは使えないのでfontSizeというようにcamelCaseで書きます

margin: 100;というように数字の場合””で値を囲まないで書きます

styled-components導入

npm install --save styled-components

デメリット
タグが見分けにくい

参考サイト：
styled-components導入
https://www.wakuwakubank.com/posts/717-react-styled-components

Emotion

npm install @emotion/react

npm install @emotion/styled

参考サイト：
【React】Emotionの使い方【基本から応用まで解説】
https://ralacode.com/blog/post/react-emotion/#google_vignette

公式サイト：
https://emotion.sh/docs/introduction

参考記事

【React】CSSの当て方の種類
https://qiita.com/seino_914/items/0cf759e636bb244a28eb