在上一章Todolist with React (1)，建立了專案環境、並且拆離 UI 設定好所有 Component 後，現在就讓我們使用套件 Styled-components 來為組件添加樣式。

上面是目前的畫面

這是預計實現的樣式

App Component

首先是最外層的 App Component，要設定

• Wrapper：包覆內部所有元素，設定背景和大小。
• Title：Todolist 標題樣式

App.js

import TaskList from "./TaskList";
import AddTask from "./AddTask";

function App() {
  return (
    <Wrapper>
      <Title>Todolist</Title>
      <AddTask />
      <TaskList />
    </Wrapper>
  );
}

import styled from "styled-components";

const Wrapper = styled.div`
  background-color: #3c5d95;
  height: 100vh;
  padding-top: 70px;
`;

const Title = styled.h1`
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 28px;
  letter-spacing: 2px;
  color: #ffc236;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
`;

清除 body margin / 設定字體

在 App.js 引入 CSS 檔 app.css ，清除 body 預設的 margin，並且設定網頁統一的字型樣式。

import "./app.css";

app.css

body {
  margin: 0;
  font-family: "Noto Sans TC", sans-serif;
}

AddTask Component

新增任務的區塊 AddTask Component，要設定：

• Wrapper：包覆內部所有元素，指定元素的排列規則。
• Input：輸入框區塊，&::placeholder 可以設定預設顯示文字的字體顏色。
• AddBtn：新增按鈕區塊，利用巢狀寫法一定設定內部的圖片樣式。

AddTask.js

import addIcon from "../assets/icon/add.png";

function AddTask() {
  return (
    <Wrapper>
        <Input
          name="addtask"
          type="text"
          placeholder={"add new task ..."}
        />
      <AddBtn>
        <img src={addIcon} alt=""/>
      </AddBtn>
    </Wrapper>
  );
}

import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  margin: 25px auto 40px;
`;

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  background-color: inherit;
  border: none;
  border-bottom: 2px solid #333;
  width: 300px;
  font-size: 16px;
  letter-spacing: 0.05em;

  &::placeholder {
    color: #333;
  }
`;

const AddBtn = styled.button`
  padding: 0;
  border: none;
  height: 27px;
  width: 27px;
  background-color: inherit;

  img {
    cursor: pointer;
  }
`;

TaskList Component

列出待辦事項，包含篩選器跟清單的 TaskList Component，要設定：

• Wrapper：設定寬度，控制內部元素的範圍。
• TaskItemContainer：任務清單區塊，設定任務 TaskItem 的排列方式。

TaskList.js

import Filter from "./Filter";
import TaskItem from "./TaskItem";

function TaskList() {
  return (
    <Wrapper>
      <Filter />
      <TaskItemContainer>
          <TaskItem />
          <TaskItem />
          <TaskItem />
      </TaskItemContainer>
    </Wrapper>
  );
}

import styled from "styled-components";

const Wrapper = styled.div`
  margin: 0 auto;
  width: 80%;
  max-width: 600px;
  min-width: 300px;
`;

const TaskItemContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 30px 0;
  background-color: #f8f8f8;
`;

Filter Component

再來是篩選器 Filter Component，要設定：

• ButtonContainer：設定內部按鈕的排列方式。
• Button：指定按鈕樣式，&:hover 可以設定滑鼠移至按鈕的樣式。

Filter.js

function Filter() {
return (
    <ButtonContainer>
      <Button>ALL</Button>
      <Button>TODO</Button>
      <Button>DONE</Button>
    </ButtonContainer>
  );
}

import styled from "styled-components";

const ButtonContainer = styled.div`
  display: flex;
`;

const Button = styled.div`
  width: min-content;
  padding: 5px 10px;
  margin-right: 10px;
  background-color: #bebebe;
  border: none;
  border-bottom: 2px solid #3c5d95;
  border-radius: 3px 3px 0 0;
  color: white;
  letter-spacing: 0.1em;
  text-align: center;
  cursor: pointer;

  &:hover {
    background-color: #ffc236;
  }
`;

TaskItem Components

代表每個任務的 TaskItem Component，要設定：

• Wrapper：設定整個任務方塊的大小和內部元素的排列方式
• CheckBox：勾選框的樣式
• TaskName：設定任務文字樣式
• Button：刪除任務的按鈕樣式

TaskItem.js

function TaskItem() {
  return (
    <Wrapper>
      <CheckBox type="checkbox"/>
      <TaskName>NEW TASK</TaskName>
      <Button>Delete</Button>
    </Wrapper>
  );
}

import styled from "styled-components";

const Wrapper = styled.div`
  background-color: white;
  width: 80%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.05em;
  padding: 0 20px;
`;

const CheckBox = styled.input.attrs({ type: 'checkbox' })`
  width: 18px;
  height: 18px;
  cursor: pointer;
`;

const TaskName = styled.div`
  flex-grow: 1;
  margin: 0 20px;
`;

const Button = styled.div`
  background-color: #bebebe;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  width: min-content;
  color: white;
  letter-spacing: 0.05em;
  cursor: pointer;

  &:hover {
    background-color: #F5727E;
  }
`;

小結

這樣就完成了所有的樣式設定，建議大家在做的過程中，可以一段一段去觀察每個樣式會對網頁造成什麼樣的改變，進而去熟悉使用各式各樣的樣式。在下一篇文章，就來在 React 中加入 Redux，使用 React-redux 動態產生任務清單，那我們就明天見囉！

範例程式碼

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️