今回はReact開発におけるstyleのあて方についてご紹介します。
私が最初にReactの勉強をしていた中でstyleのあて方が複数あることに驚きました。
基本的には自分が好きなstyleのあて方でいいと思いますが、現場によっては
自分が好きなstyleじゃない可能性もあるので、この機会に様々なstyleのあて方について
マスターしましょう。
Inline Styles
まずはInline Stylesについて紹介します。
いきなりですが書き方は以下のようになります。
InlineStyle.jsx export const InlineStyle = () => { const containerStyle = { border: "solid 2px #392eff", borderRadius: "20px", padding: "8px", margin: "8px", display: "flex", justifyContent: "space-around", alignItems: "center" }; const titleStyle = { margin: 0, color: "#3d84fa8" }; const buttonStyle = { backgroundColor: "#abedd8", border: "none", padding: "8px", borderRadius: "8px" }; return ( <div style={containerStyle}> <p style={titleStyle}>InlineStyles</p> <button style={buttonStyle}>ボタン</button> </div> ); };
Inline Stylesで書く場合は
プロパティ:"文字列"で書きます。
プロパティに関してはキャメルケースで書くというのが特徴的ですね。
CSS Modules
CSS Modulesはイメージとしては従来のWeb開発の通りcssの記述を別ファイルに切り出して
記述をします。
名前.module.scss 名前.module.css にする必要があるので注意してください。
名前.module.scss .container{ border: solid 2px #392eff; border-radius: 20px; padding: 8px; margin: 8px; display: flex; justify-content: space-around; align-items: center; } .title{ margin: 0; color: #3d84a8; } .button{ background-color: #abedd8; border: "none"; padding: "8px"; border-radius: "8px" }
実際にコンポーネントで使うときは以下のように書きます。
html import classes from "./CssModules.module.scss"; export const CssModules = () => { return ( <div className={classes.container}> <p className={classes.title}>CssModules</p> <button className={classes.button}>ボタン</button> </div> ); };
Styled.jsx
次はStyled.jsxです。
注意点としてはデフォルトで疑似要素が使えません。
html export const StyledJsx = () => { return ( <> <div className="container"> <p className="title">Styled JSX</p> <button className="button">FIGHT</button> </div> <style jsx="true">{` .container { border: solid 2px #392eff; border-radius: 20px; padding: 8px; margin: 8px; display: flex; justify-content: space-around; align-items: center; } .title { margin: 0; color: #3d84a8; } .button { background-color: #abedd8; border: "none"; padding: "8px"; border-radius: "8px"; } `}</style> </>
styled components
最後にstyled componentsの紹介です。
React開発の中で一番人気のstyleのあて方です。
html import styled from "styled-components"; export const StyledComponents = () => { return ( <SContainer> <STitle>styledcomponents</STitle> <SButton>ボタン</SButton> </SContainer> ); }; const SContainer = styled.div` border: solid 2px #392eff; border-radius: 20px; padding: 8px; margin: 8px; display: flex; justify-content: space-around; align-items: center; `; const STitle = styled.p` margin: 0; color: #3d84a8; `; const SButton = styled.button` background-color: #abedd8;
頭にSなどをつけることでコンポーネントと混同しないよう工夫が必要です。