特徴
Styled Componentsなど他のCSS in JS思想のライブラリに比べて色々な使い方がある。
インストール
|
1 |
npm i @emotion/styled @emotion/react |
サンプル1（Sassと同じ記法）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { css } from "@emotion/css"; function Emotion() { const containerCss = css` border: solid #000 1px; border-radius: 10px; `; return ( <> <div css={containerCss}> <p>- Emotion -</p> <button>- Emotion -</button> </div> </> ); } |
この手法であれば、sassと同じ書き方ができます。
サンプル2（inline-styleと同じ記法）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { css } from "@emotion/css"; function Emotion() { const containerCss = css({ border: "solid #000 1px", borderRadius: "10px", }); return ( <> <div css={containerCss}> <p>- Emotion -</p> <button>- Emotion -</button> </div> </> ); } |
サンプル3（styled-componentsと同じ記法）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import styled from "@emotion/styled"; function Emotion() { return ( <> <Cotainer> <p>- Emotion -</p> <button>- Emotion -</button> </Cotainer> </> ); } const Cotainer = styled.div` border: solid #000 1px; border-radius: 10px; `; export default Emotion; |
この記事へのコメントはありません。