🔖
React sytleの当て方まとめ
React の style の当て方まとめ
いろいろあってやり方悩むので、自分なりにオススメ順に並べてみます
Css で書けるということは移行しやすかったりドキュメント多かったりで評価高いです
1.Styled Component
2.Emotion
3.Css Modele
4.styled Jsx
5.Inline Style
1.Styled Component
styled-components のインストールが必要
コンポーネント単位でスタイルを当てられるのでわかりやすく、CSS がそのまま使える
StyledComponents.jsx
import styled from "styled-components";
export const StyledComponents = () => {
return (
<SContainer>
<STitle>- Styled Components -</STitle>
<SButton>FIGHT</SButton>
</SContainer>
);
};
// 頭文字にSをつけるとわかりやすい
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;
`;
// hoverなどのCSS使える
const SButton = styled.button`
background-color: #abedd8;
border: none;
padding: 8px;
border-radius: 8px;
&:hover {
background-color: #46cdcf;
color: #fff;
cursor: pointer;
}
`;
2.Emotion
設定が多い。
いろいろなスタイルの当て方が出来る。
反面、選択肢が多いのは良し悪しあると思う。
Emotion.jsx
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from "@emotion/react";
import styled from "@emotion/styled";
export const Emotion = () => {
const containerStyle = css`
border: solid 2px #392eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: Flex;
justify-content: space-around;
align-items: center;
`;
const titleStyle = css({
margin: 0,
color: "#3d84a8"
});
return (
<div css={containerStyle}>
<p css={titleStyle}>- Emotoion -</p>
<SButton>FIGHT</SButton>
</div>
);
};
const SButton = styled.button`
background-color: #abedd8;
border: none;
padding: 8px;
border-radius: 8px;
&:hover {
background-color: #46cdcf;
color: #fff;
cursor: pointer;
}
`;
3.CssModule
1 つのファイルで全て扱うので管理しやすいという考え方
ただ React コンポーネント単位で作成したいので、既存のアプリに React で開発などの場面で活躍か
また、名前空間を使用することで、例えば container という同じ CSS があっても、
Style.container と Classes.container でわけて考えることができる
CssModeuls.jsx
import classes from "./CssModules.module.scss";
export const CssModules = () => {
return (
<div className={classes.container}>
<p className={classes.title}>- CSS Style -</p>
<button className={classes.button}>FIGHT</button>
</div>
);
};
CssModules.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;
&:hover {
background-color: #46cdcf;
color: #fff;
cursor: pointer;
}
};
4.styled Jsx
そのまま CSS を使える
しかし、hover などは効かない
StyledJsx.jsx
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;
&:hover {
background-color: #46cdcf;
color: #fff;
cursor: pointer;
}
}
`}</style>
</>
);
};
5.Inline Style
CSS は使えず border-radius=>borderRadius など変換が必要
hover なども効かない
テスト用には簡単でいい
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: "#3d84a8"
};
const buttonStyle = {
backgroundColor: "#abedd8",
border: "none",
padding: "8px",
borderRadius: "8px"
};
return (
<div style={containerStyle}>
<p style={titleStyle}>- InlineStyle -</p>
<button style={buttonStyle}>FIGHT</button>
</div>
);
};
まとめ
個人的には Styled Component もしくは Emotion で開発するかなと。
CSS が使えるというのは大きい。
CSS フレームワークというものがあるので、そちらを使うとより簡単にかっこよくできます。
自分はセンスがあまりないので、フレームワークがありがたい。
おすすめは chakra ui。
Discussion