Inline Style
これは、JavaScript のオブジェクトとしてスタイルを定義し、要素のstyle 属性に当てるという方法です。
import React from 'react';
import { Sample } from './components/Sample';
export const App = () => {
return (
<div>
<Sample />
</div>
)
}
export const Sample = () => {
const pStyle = {
fontSize: '18px',
color: 'blue'
}
const buttonStyle = {
padding: '6px 12px',
border: 'none',
borderRadius: '5px'
}
return (
<div>
<p style={pStyle}>sample</p>
<button style={buttonStyle}>click</button>
</div>
)
}

オブジェクトとして定義するため、普通のCSSの書き方とは異なる点に注意が必要です。
CSS Modules
これは、CSSファイルをつくり、それを読み込んでクラスを当てるという方法になります。
ファイル名は「○○.module.css」になります。
今回は、「Sample.js」と同階層に、
「Sample.module.css」を作りました。
.pStyle {
font-size: 18px;
color: blue
}
.buttonStyle {
padding: 6px 12px;
border: none;
border-radius: 5px;
}
import classes from './Sample.module.css'
export const Sample = () => {
return (
<div>
<p className={classes.pStyle}>sample</p>
<button className={classes.buttonStyle}>click</button>
</div>
)
}
クラス名を指定するときに「className={}」となることに注意してください。
ブラウザの表示はさきほどと同様です。
Styled JSX
これは、JSXの中でスタイルを定義できるようにする方法です。
パッケージをインストールする必要があるので、以下のコマンドを実行します。
npm install --save styled-jsx
実行後、package.json の”dependencies”に”styled-jsx”が含まれていればOKです。
では、「Sample.js」を以下のように修正します。
export const Sample = () => {
return (
<>
<div>
<p className="pStyle">sample</p>
<button className="buttonStyle">click</button>
</div>
<style jsx="true">{`
.pStyle {
font-size: 18px;
color: blue
}
.buttonStyle {
padding: 6px 12px;
border: none;
border-radius: 5px;
}
`}</style>
</>
)
}
まず、以下のような形式でスタイルを書きます。
<style jsx="true">{`スタイル`}</style>
そして、className=”クラス名” という形で要素に付与します。
ブラウザの表示はさきほどと同様です。
styled components
これは、スタイルを定義したコンポーネントを使うという方法になります。
まずはパッケージをインストールするため、以下のコマンドを実行します。
npm install --save styled-components
では、「Sample.js」を以下のように修正します。
import styled from 'styled-components'
export const Sample = () => {
return (
<div>
<StyleP>sample</StyleP>
<StyleButton>click</StyleButton>
</div>
)
}
const StyleP = styled.p`
font-size: 18px;
color: blue;
`
const StyleButton = styled.button`
padding: 6px 12px;
border: none;
border-radius: 5px;
&:hover {
background: blue;
color: white;
}
`
ご覧のように、StyleP や StyleButton という名前のコンポーネントとして定義します。
(命名は自由です)
そして、今回は
import styled from 'styled-components'
としているため、styled.要素`スタイル` という形式でスタイルを定義します。
また、sassの記法が使えるため、ホバー処理なども一緒に書くことができます。
&:hover {
background: blue;
color: white;
}
Emotion
これは、Inline Style や styled components をまとめて使用できるようにするような機能になります。
まずはパッケージをインストールするため、以下の2つのコマンドを実行します。
npm install --save @emotion/react
npm install --save @emotion/styled
では、「Sample.js」を以下のように修正します。
p要素をInline Style、button要素をstyled componentsでスタイリングしています。
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from '@emotion/react'
import styled from '@emotion/styled'
export const Sample = () => {
const styleP = css`
font-size: 18px;
color: blue;
`
return (
<div>
<p css={styleP}>sample</p>
<StyleButton>click</StyleButton>
</div>
)
}
const StyleButton = styled.button`
padding: 6px 12px;
border: none;
border-radius: 5px;
&:hover {
background: blue;
color: white;
}
`
まず、Inline Style のように使用したい場合は以下の2通りの書き方があります。
const styleP = css`
font-size: 18px;
color: blue;
`
/**CSSの記述方法 */
または
const styleP = css({
fontSize: '18px',
color: 'blue'
})
/**JavaScriptのオブジェクトの記述方法 */
とし、要素には css={変数名} とすることでスタイルを当てられます。
styled components として使用したい場合は特に変わらないですね。
ブラウザの表示は同様です。
今回は以上になります。
ご覧いただきありがとうございました!
続きはこちら↓
コメント