昨天我們講完了 UI Library
今天來看專案裡的 component

以前寫的 CSS

以前還在寫 PHP 的時候，很多時候都會需要撰寫前端
在寫前端樣式的時候，都會使用像是 Bootstrap 這種 UI Library
倘若無法使用 Bootstrap 內建的 component
很多時候會選擇自己看著設計稿，把畫面尻出來
但是這種寫法，很難重複再運用
下次如果遇到類似的設計，只能複製之前的寫法
非常麻煩

styled-components

在 React 的開發，很常會使用 styled-components

styled-component 是一個 CSS-In-JS 的函式庫，使你可以在 JSX 中撰寫 CSS code，更方便的是他可以接到 component 的 props 值來動態改變 css 樣式。

在專案中的 component 滿多部分是使用 styled-components
以 AdminCard 為例，它被廣泛地使用在前台

import { Card } from 'antd'
import styled, { css } from 'styled-components'

const AdminCard = styled(Card)<{ variant?: string }>`
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);

  .ant-card-meta-title {
    white-space: normal;
  }

  ${props =>
    props.variant === 'program' &&
    css`
      overflow: hidden;

      .ant-card-body {
        height: 13rem;
      }

      .ant-card-meta {
        height: 100%;
      }

      .ant-card-meta-detail {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .ant-card-meta-title {
        height: 42px;

        h1 {
          font-size: 18px;
        }
      }

      .ant-card-meta-description {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;

        .ant-typography {
          color: #9b9b9b;
        }
      }
    `}
`

export default AdminCard

他除了可以直接寫 SCSS
還可以傳入參數，根據不同的 props
呈現不一樣的樣式

明天我們繼續看更仔細部分

參考文章

【Day 12】Styled-component