# styled-components

:::info
- 【官方文件】
> <https://styled-components.com>
:::

---

[TOC]

---

## 全域樣式

- `theme/GlobalStyled.jsx`
- `BaseStyle`：全域設定
- `ResetStyle`：`CSS Reset`

import { createGlobalStyle } from 'styled-components';

export const BaseStyle = createGlobalStyle`
html, body {
  font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  color: #333333;
  background-color: #FFD370;
}

input {
  border: none;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: cover;
}

img, a {
  transition: opacity .3s linear;

  &:hover {
    opacity: .9;
  }
}

button, label {
  cursor: pointer;
}

span .material-symbols-outlined {
  vertical-align: middle;
}
`;

export const ResetStyle = createGlobalStyle`
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

address, caption, cite, code, dfn, em, strong, th, var, b {
  font-weight: normal;
  font-style: normal;
}

abbr, acronym {
  border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  text-size-adjust: 100%;
  box-sizing: border-box;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote {
  &:before, &:after {
    content: '';
    content: none;
  }
}

q {
  &:before, &:after {
    content: '';
    content: none;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th {
  text-align: left;
}

textarea {
  resize: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

button {
  padding: 0;
  border: none;
  background: none;
}
`;

- 在進入點的地方匯入使用
- `index.jsx`

    <ResetStyle />    
    <BaseStyle />
    <App />

---

## CSS

- 匯入 `{ css }`

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

- 用 `props` 傳遞

const Button = styled.button<{ $primary?: boolean; }>`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #BF4F74;
  color: '#BF4F74';
  margin: 0 1em;
  padding: 0.25em 1em;


  ${props =>
    props.$primary &&
    css`
      background: '#BF4F74';
      color: white;
    `};
`

- render

    <Button>Normal Button</Button>
    <Button $primary>Primary Button</Button>

---

## 讀取圖片

- 作為變數傳入

import styled from 'styled-components';
import img from './img/bg.gif';
    
const Content = styled.div`
  border: 1px solid #000;
  background-image: url(${img});
  width: 2000px;
  height: 2000px;
`;

> <https://stackoverflow.com/questions/53920405/change-background-image-with-styled-component>

---

## 參考資料

> <https://medium.com/itsoktomakemistakes/fc8faa8059f1>

> <https://pjchender.dev/npm/npm-styled-components/>

<!-- --- -->
{%hackmd UYCim7nMT--Eci-1SL9eYg %}
<!-- --- -->