ReactでのCSSの書きかた4選！

はじめに

ReactのCSSの書き方が複数個あったので、自分ようにまとめます。

①各タグにそのままstyle属性を適用

 <Button style={{ color:'inherit' }}>LOGIN</Button>

②CSSオブジェクトをあらかじめ定義しておく

export const App () =>{
  const buttonStyle={
    color:"inherit"
  };

  return (
  <>
    <Button style={ buttonStyle }>LOGIN</Button>
  </>
  )
}

③MaterialUIやReact-BootstrapといったライブラリやCSSフレームワークを用いる方法

今回は、MaterialUIを用いたCSSの編集を紹介します。

まずは、muiライブラリをダウンロード

npm install @mui/material @emotion/react @emotion/styled

Muiのcolorに関しては、色の指定方法が2種類あります

1種類目(直接指定)

<Button variant="contained" color="inherit">LOGIN</Button>

2種類目(sxプロパティを用いた指定)

Buttonでcolorプロパティの値に"primary", "inherit"などBootstrap等でよくもちいられる色の文字列にするとエラーが出てしまう。
その場合、以下の様に色を指定することができる。

<Button variant="contained" sx={"background-color: blue;"}>LOGIN</Button>

おわりに

初心者なので、間違っている点も多々あるかと思います。
間違った箇所など指摘がありましたら、よろしくお願い致します。

参考文献

追記：CSS Modulesという書き方が一般的だったみたいです、、、

ちゃんと調べて後ほどまとめます。。