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

Contents

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;というように数字の場合””で値を囲まないで書きます

npm install --save styled-components

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

npm install @emotion/react

npm install @emotion/styled

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