はじめに

reactとjsをいじり始めて、まだ日が浅い素人ですが、人によってcssに記述方法が違っていて、自分もどれにすればいいのかまた古い情報や新しい情報が入り混じって大変わかりにくいので、ここでまとめておこうと思います！！

至らない点が数あると思いますが、その際はアドバイスしていただけると幸いです。

そしてトラハックさんのこちらの動画を中心にまとめています！！
この記事より詳しくわかりやすく説明しておりますので、ぜひこちらからご覧になってみてください！！

インラインスタイル

・JSXのstyle属性を使う
・導入が簡単
・公式では非推奨
・計算が増える　　パフォーマンスが落ちる！
・擬似要素を使えない　例）before, hover, after,
importReactfrom'react';conststyle={backgroundColor:'none';border:'none',display:'block',padding:'4px 16px',}constPrimayButton=(props)=>{return(<buttonstyle={style}青いボタン</buttoon>
);};exportdefaultPrimaryButton;

注意）キャメルケース

クラスによるスタイリング

・HTMLファイル読み込み
・導入が簡単
・全てがグローバルスコープ
　→命名規則を工夫しなければならない！
　→どこにどのクラスを書いたか？

注意）元になるindex.jsで読み込まなければならない！(create-react-app)
一般的なスタイルになるのでコードは省かせていただきます！

CSS Modules

・Webpack＋Babelを使う　　
・CSSをモジュールとしてimport
・慣れ親しんだCSS記法
・クラス名の自動変換
・jsの読み取り順序で適用順序も変わる

先ほどと違うのはjsのなかでimportする！
モジュール化している（css）

webpack・・・モジュールバンドラーと呼ばれ複数のファイルをまとめる！
babel・・・コンパイラー（トランスコンパイラー）中身を変換する(ここではcss)

.button{background-color:#42a5f5;border:none;display:block;padding:4px16px;}

importReactfrom'react';import'./button.css';constPrimayButton=(props)=>{return(<buttonclassName={"button"}>青いボタン</button>
)}

Css in js

・styledーcomponentが有名
・スコープ限定
・ベンダープレフィックス付与
　　ブラウザ対応を自動でやってくれるもの
・propsでスタイルを変換できる！
・シンタックスハイライト
→style objectで解決
importReactfrom'react';importstyledfrom'styled-components';constButton=styled.button({backgroundColor:'#442a5f5',border:'none',display:'block',padding:'4px 16px','&:hover':{backgroundColor:'#80d6ff',}})constPrimaryButton=(props)=>{return(<Button>青いボタン</Button>
)}

propsによってスタイル変更もできてスコープも限定し、命名規則によって縛れることもないまたオブジェクト型にすることでシンタックハイライトも入るようになった！
またコンポーネントにスタイルをつけたい場合は、styled.(component名)({})とする！

styled-component

この方法がcss in jsの一般的になるので説明しておきます！
これについてもトラハックさんの別動画を参照しておりますので詳しく知りたい方はこちらからご覧いただくようにお願いいたします！

記法

・Tagged Template Literal（シンタックスハイライトなし）
→キャメルケースではない

constTemlateLiteral=styled.button`
  background-color: #42a5f5;
  border: none;
  display: block;
  padding: 4px 16px;
  &:hover: {
    background-color: #80d6ff
  }
`

・style Objects（シンタックスハイライトあり）
→キャメルケースになる

constButton=styled.button({backgroundColor:'#42a5f5',border:'none',display:'block',padding:'4px 16px','&:hover':{backgroundColor:'#80d6ff'})}

propsでスタイルを切り替える

constButton=styled.button(props=>({backgroundColor:props.isPrimary?'#41B&E&':'#FFB549',border:'none',display:'block',padding:'4px 16px','&:hover':{backgroundColor:props.isPrimary?'#a2dbf3':'#FFCA7C',}}))constBaseButton=(props)=>{return(<Button>{props.label}</Button>
);};//呼び出し側//<BaseButton isPrimary={true} label={"Primary"}//<BaseButton isPrimary={false} label={"Secondary"}

注意）? true : false

ここではisPrimaryのtrue,falseによってスタイルを変えている！(backgroundColor)

themeを使う

importReactfrom'react';importstyled,{ThemeProvider}from'styled-components';consttheme={main:'#41B6E6',light:'#a2dbf3'}constBaseButton=(props)=>{return(<ThemeProvidertheme={them}><Button>{props.label}</Button>
</ThemeProvider>
);};exportdefaultBaseButton;

ここではthemeを宣言後、使いたいコンポーネントでラッピングする！
そしてthemeを渡す！

constButton=styled.button({backgroundColor:'theme.main',border:'none',display:'block',padding:'4px 16px','&:hover':{backgroundColor:theme.light}})

そしてコンポーネント内で呼び出す！

最後に

まとめてみてstyle Objectsの形がスコープやシンタックスハイライト、propsの切り替えなどの観点から見て一番使いやすいのかなと感じたので積極的に使っていこうと思いました。
まだまだ知識不足で見落としている箇所などあると思いますがその際はアドバイスしていただけると幸いです！
最初にも書いた通り参照したのはトラハックさんの動画になりますので詳しく知りたい方はそちらの動画を見ていただくようお願いいたします！