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

参考記事

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