Reactのstyleのあて方について4種類紹介！

今回は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などをつけることでコンポーネントと混同しないよう工夫が必要です。