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

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

基本使用

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>

完成 ٩(ˊᗜˋ )و