確認環境
$ npm list --depth=0 | grep react
my-app@0.1.0 /Users/xxxxx/projects/playground/react/my-app
├── @testing-library/react@13.3.0
├── react@18.2.0
├── react-dom@18.2.0
├── react-scripts@5.0.1前提
下記コマンドで生成したプロジェクトを想定しています。
$ npx create-react-app my-appstyled-components をインストール
$ npm install --save styled-components確認
$ npm list --depth=0 | grep styled
├── styled-components@5.3.5使い方
検証で使ったソースコードの全体はこちらです。
src/App.js
import React from 'react';
import styled from 'styled-components';
// 例1
const BlueButton = styled.button`
background: blue;
color: white;
width: 200px;
`;
// 例2
const OverrideRedButton = styled(BlueButton)`
background: red;
`;
// 例3
const ReceiveBgColorButton = styled.button`
background: ${(props) => props.bgColor};
`;
// 例4
const ReceiveBgColorButton2 = styled(BlueButton)`
background: ${(props) => props.bgColor};
`;
function App() {
return (
<div>
<BlueButton>Push!!</BlueButton>
<OverrideRedButton>Red!!!</OverrideRedButton>
<ReceiveBgColorButton bgColor="yellow">ddd</ReceiveBgColorButton>
<ReceiveBgColorButton bgColor="pink">ddd</ReceiveBgColorButton>
<ReceiveBgColorButton2 bgColor="yellow">ddd</ReceiveBgColorButton2>
<ReceiveBgColorButton2 bgColor="pink">ddd</ReceiveBgColorButton2>
</div>
);
}
export default App;例1
基本の使い方です。
const BlueButton = styled.button`
background: blue;
color: white;
width: 200px;
`;例2
例1の BlueButton をスタイルに、背景色を上書きしています。
const OverrideRedButton = styled(BlueButton)`
background: red;
`;例3
コンポーネントの指定時に props から背景色を受け取ります。
const ReceiveBgColorButton = styled.button`
background: ${(props) => props.bgColor};
`;例4
例1の BlueButton をスタイルに、背景色を上書きする背景色を props から受け取ります。
const ReceiveBgColorButton2 = styled(BlueButton)`
background: ${(props) => props.bgColor};
`;