【初心者】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;
というように数字の場合””で値を囲まないで書きます
参考記事
【React】CSSの当て方の種類
https://qiita.com/seino_914/items/0cf759e636bb244a28eb