與 CSS 整合：Styled Components

與 CSS 整合：Styled Components

Styled Components 是一個流行的 CSS-in-JS 解決方案，允許你在 React 應用中使用 JavaScript 定義樣式。這種方法讓組件的樣式和邏輯更緊密地結合在一起，並提供了動態樣式的支持。以下是如何使用 Styled Components 的指南。

---

1. 安裝 Styled Components

首先，確保你已經安裝了 Styled Components。可以使用 npm 或 yarn 進行安裝：

npm install styled-components

或

yarn add styled-components

2. 基本用法

你可以創建一個 Styled Component，並將其用作 React 組件。

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

function App() {
  return (
    <div>
      <Button>點擊我</Button>
    </div>
  );
}

export default App;

3. 動態樣式

你可以根據組件的 props 動態更改樣式。例如，根據 primary 屬性來改變按鈕的顏色：

const Button = styled.button`
  background-color: ${(props) => (props.primary ? '#007bff' : '#f8f9fa')};
  color: ${(props) => (props.primary ? 'white' : '#007bff')};
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) => (props.primary ? '#0056b3' : '#e2e6ea')};
  }
`;

function App() {
  return (
    <div>
      <Button primary>主要按鈕</Button>
      <Button>次要按鈕</Button>
    </div>
  );
}

4. 組合樣式

Styled Components 允許你創建可重用的樣式，並可以根據需要進行組合。

const BaseButton = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

const PrimaryButton = styled(BaseButton)`
  background-color: #007bff;
  color: white;

  &:hover {
    background-color: #0056b3;
  }
`;

const SecondaryButton = styled(BaseButton)`
  background-color: #f8f9fa;
  color: #007bff;

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

function App() {
  return (
    <div>
      <PrimaryButton>主要按鈕</PrimaryButton>
      <SecondaryButton>次要按鈕</SecondaryButton>
    </div>
  );
}

5. 全局樣式

如果需要定義全局樣式，可以使用 createGlobalStyle。

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <div>
        <Button>點擊我</Button>
      </div>
    </>
  );
}

6. 主題支持

Styled Components 也支持主題，可以通過 ThemeProvider 來實現。

import { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: '#007bff',
  secondaryColor: '#f8f9fa',
};

const ThemedButton = styled.button`
  background-color: ${(props) => props.theme.primaryColor};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedButton>主題按鈕</ThemedButton>
    </ThemeProvider>
  );
}

7. 總結

• 簡單易用：Styled Components 使得樣式與組件緊密結合，提升了可維護性。
• 動態樣式：可以根據 props 動態調整樣式，靈活性高。
• 主題支持：通過 ThemeProvider 可以輕鬆實現主題切換功能。
• 全局樣式：方便地定義全局樣式，以統一應用的外觀。

通過使用 Styled Components，你可以更好地管理樣式，使你的 React 應用更具可維護性和可讀性。