ReactでCSSを適用する方法のメモ
はじめに
今回の記事の目的
ReactでCSSを当てる方法はいくつかある。覚えておけばよさそうなものだけ抜粋してメモ。
- はじめに
- classNameでクラスを設定
- インラインスタイル
- styled-components
- コンポーネントライブラリ(chakra-uiやMUI)を利用
- その他の方法
- 表示内容
- おわりに
- 参考文献
classNameでクラスを設定
ソースコード
App.tsx
function App() { return ( <> {/* 方法1:classNameでクラスを設定 */} <div className="red-area"> <h1>方法1</h1> <p> classNameというpropsにクラス名を渡す。 index.tsxで呼び出しているindex.clasNameというpropsにクラス名を渡す。 index.cssに通常のCSSを記載する。 </p> </div> </> ); } export default App;
index.css
.red-area { background-color: red; color: white; }
インラインスタイル
ソースコード
App.tsx
const style = { container: { backgroundColor: "red", color: "white" } }; function App() { return ( <> {/* 方法2:インラインスタイル */} <div style={style.container}> <h1>方法2</h1> <p> インラインスタイル:styleというpropsに、オブジェクトを渡す。 オブジェクトの型はReact.CSSProperties。 ここではstyleオブジェクトの中に、 要素ごとのReact.CSSPropertiesオブジェクトを設定している。 </p> </div> </> ); } export default App;
styled-components
インストール
$ yarn add styled-components $ yarn add @types/styled-components
@types/styled-components
はtypescriptの場合に必要。
ソースコード
styled.div``
で囲んだ中にはCSSをそのまま書ける。:hover
なども書ける。
import styled from "styled-components"; function App() { return ( <> {/* 方法3:styled-componentsモジュールを利用 */} <SContainer> <h1>方法3</h1> <p> styled-componentsをインポートする。 関数の外で、例えばdivをベースに独自のスタイルをつけたコンポーネント SContainerを用意する。 </p> </SContainer> </> ); } // SContainerの定義 const SContainer = styled.div` background-color: red; color: white; `; export default App;
div
等HTMLのタグを装飾する場合は
const SContainer = styled.div`
とするが、自作のコンポーネントを装飾する際は
const SContainer2 = styled(SContainer)`
のように記載する。
コンポーネントライブラリ(chakra-uiやMUI)を利用
今回はchakra-uiを利用する。
最も有名なのはMaterial UIらしい。 mui.com
インストール
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
ソースコード
import { ChakraProvider, Box, Text, Heading } from "@chakra-ui/react"; function App() { return ( <> <ChakraProvider> <Box bg="red" color="white"> <Heading>方法4</Heading> <Text> コンポーネントライブラリのchakra-uiを利用。 divタグの代わりにBox、pタグの代わりにTextなど 便利に使えるコンポーネントがそろっている。 </Text> </Box> </ChakraProvider> </> ); } export default App;
<ChakraProvider>
タグで囲む必要があるが、親コンポーネントで囲んでおけば子コンポーネントでもchakra-uiが使える。
その他の方法
これ以外にも方法は様々あるらしい。
- CSS Modulesを利用する方法。有名なモジュールであるnode-sassは非推奨になっている模様。
- StyledJsxというモジュールを利用する方法。
- emotionというモジュールを利用する方法。
表示内容
おわりに
方法3と4をうまく使えれば良さそう。