在React使用styled-components。Use Styled-components in React。

為了避免.css過於混亂,有些React流派會使用styled-componets來管理樣式,今天記錄一下如何使用,以及稍稍為進階將props放進css中的寫法。

Molly M
5 min readSep 23, 2021

基本使用

  1. create-react-app
  2. npm install styled-components
在App.js中import 
import styled from "styled-components";

直接定義

const TestComponent = styled.div`
background-color: gray;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
...
`;

styled.OOO 表html的tag name,自定義一個名為TestComponent的div區塊。

const Text = styled.p`
color: white;
`;

組合在一起

<TestComponent>
<Text>hello world</Text>
</TestComponent>

進階 props傳遞

同一區塊但只有些微樣式差異,就可以在自定義的模板中加入參數,並讓css依照傳進去的參數改變樣式。

demo

const TestComponent = styled.div`
background-color: ${(props) => props.bg};
...
`;
<TestComponent bg="black">
<Text>hello world</Text>
</TestComponent>
<hr/>
<TestComponent bg="gray">
<Text>change background color!</Text>
</TestComponent>

(跟使用react hooks差不多OuO 真是相見恨晚)

補充

  • 如果有active或hover怎麼處理

使用 &:

&:hover {
background-color: #e9f5f5;
transform: scale(1.1);
}
  • 可以直接用參數,不用給定值
const Button = styled.button`
background: ${(props) => (props.primary ? "palevioletred" : "white")};
color: ${(props) => (props.primary ? "white" : "palevioletred")};
...
`;
...<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
  • 在同一基礎下進行微調(同button樣式但只想修改部分的話)
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
const TomatoButton = styled(Button)`
color: green;
border-color: green;
`;
...<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
  • 動畫
import styled from "styled-components";
import { keyframes } from 'styled-components'
const rotate = keyframes`
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
`;
const Rotate = styled.div`
display: inline-block;
animation: ${rotate} 2s linear infinite;
padding: 2rem 1rem;
font-size: 1.2rem;
`;
...<Rotate>&lt; 💅🏾 &gt;</Rotate>

完成 ٩(ˊᗜˋ )و

--

--

Molly M
Molly M

Written by Molly M

Molly — Software Developer / 職稱是軟體研發工程師。 什麼都寫,專精於前端及APP (ง•̀_•́)ง ! ❤ 合作發案討論疑難雜症請洽: momolly1024@gmail.com