4-5 為深色主題做準備 - 將 props 傳入 styled components 中

本單元為概念解說，並無對應的專案分支。

單元核心#

這個單元的主要目標包含：

了解如何將 props 帶入 emotion 的 styled components 中使用
了解把 props 帶入 styled components 中可以做的應用

自從手機裝置出現「深色模式」後，不論是 Instagram、Google Play 或 iOS，更新後都開始能套用深色主題了，後來非常多的網站現在也開始支援深色主題的功能，避免許多夜貓子使用者在睡前如果想要瀏覽頁面時被白屏閃瞎的情況。

為了實作深色主題，在這個單元中，主要會要說明更多 Emotion 的用法，在對這些用法有基本的理解後，將於下一個單元開始實作深色主題。

Emotion: 透過 props 將資料帶入 Styled Components 內#

我們已經知道，在 React 中父子層元件間的資料，可以透過 props 來進行傳遞。現在當我們使用 emotion 來產生帶有樣式的元件時，因為它就是 React 元件，因此也可以使用 props 的方式把資料帶進去 styled components 中。

舉例來說，Location 元件是透過 emotion 所建立的 styled components，既然是 React 元件，一樣可以用 props 的方式把資料傳進去。這裡我們可以將 theme 當成一個 props 串進去 Location 這個 styled components 中：

const Location = styled.div`
  font-size: 28px;
  color: #212121;
  margin-bottom: 20px;
`;

const App = () => {
  return (
    {/* ... */}
      <Location theme="dark">台北市</Location>
    {/* ... */}
  );
};

接著在使用 Emotion 定義 Location 這個 Styled Component 的地方，就可以透過 props 取得傳入的資料：

// 透過 props 取得傳進來的資料
// props 會是 {theme: "dark", children: "台北市"}
const Location = styled.div`
  ${(props) => console.log(props)}
  font-size: 28px;
  color: #212121;
  margin-bottom: 20px;
`;

搭配 props 和 css 方法達到實作深色主題的邏輯#

這個做有什麼用呢？還記得我們提過把 CSS 寫在 JS 會有一些好處，現在當我們可以取得外部傳進來的資料時，就可以根據這個資料來決定要呈現的 CSS 樣式，例如，當 theme 為 dark 時就把文字顏色改成 #DADADA，否則顯示 #212121，就可以寫成這樣：

// 透過傳進來的資料決定要呈現的樣式
const Location = styled.div`
  font-size: 28px;
  color: ${(props) => (props.theme === 'dark' ? '#dadada' : '#212121')};
  margin-bottom: 20px;
`;

透過這樣的方式，只需要修改 theme 這個 props 傳入的值，就可以快速地切換許多元件的 CSS 樣式，以這裡來說，只要 Location 元件帶入的 props 不同時，該元件就會呈現出不同的顏色：

<Location theme="dark">台北市</Location>  // 文字的顏色會是 '#dadada'
<Location theme="light">台北市</Location> // 文字的顏色會是 '#212121'

這的單元並沒有對應的程式碼，主要說明了如何將 props 傳入 styled components 中的方式，還有如何透過這種方式來實作亮／暗色主題切換的邏輯。在下一個單元中，就會進一步根據這樣的方式來實作亮／暗色主題的切換。