跳至主要内容

1 篇文章 含有標籤「styled」

檢視所有標籤

Emotion CSS 入門教學筆記 | 學習筆記

· 閱讀時間約 3 分鐘
kdchang

1. Emotion CSS 簡介​

Emotion 是一款強大的 CSS-in-JS 解決方案，提供高效能且靈活的樣式管理方式，適用於 React 應用。Emotion 支援兩種主要的使用方式：

  1. CSS Prop（使用 JSX 內嵌樣式）
  2. styled API（使用 styled 函式創建元件）

2. 安裝 Emotion​

使用 npm 或 yarn 安裝 Emotion 核心套件：

npm install @emotion/react @emotion/styled

如果專案使用 Babel，建議安裝 Emotion 的 Babel 插件來提高效能：

npm install --save-dev @emotion/babel-plugin

並在 .babelrc 中添加：

{
  "plugins": ["@emotion"]
}

3. CSS Prop 用法​

CSS Prop 允許你直接在 JSX 中定義 CSS 樣式。

基本範例​

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const style = css`
  background-color: lightblue;
  padding: 20px;
  border-radius: 8px;
`;

function App() {
  return <div css={style}>Hello, Emotion!</div>;
}

export default App;

傳遞 props 變更樣式​

const dynamicStyle = (color) => css`
  background-color: ${color};
  padding: 20px;
  border-radius: 8px;
`;

function App({ color = 'lightblue' }) {
  return <div css={dynamicStyle(color)}>Dynamic Emotion</div>;
}

4. styled API 用法​

styled API 讓我們能夠創建具備 CSS 樣式的 React 元件。

基本範例​

import styled from '@emotion/styled';

const Button = styled.button`
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background-color: #2980b9;
  }
`;

function App() {
  return <Button>Click Me</Button>;
}

export default App;

傳遞 props 變更樣式​

const Button = styled.button`
  background-color: ${(props) => props.bg || '#3498db'};
  color: ${(props) => props.color || 'white'};
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background-color: ${(props) => (props.bg ? darken(0.1, props.bg) : '#2980b9')};
  }
`;

function App() {
  return <Button bg="tomato">Custom Button</Button>;
}

5. 全域樣式與 Theme​

使用 Global 樣式​

import { Global, css } from '@emotion/react';

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

function App() {
  return (
    <>
      <Global styles={globalStyles} />
      <div>Hello, Global Emotion!</div>
    </>
  );
}

使用 Theme​

import { ThemeProvider } from '@emotion/react';
import styled from '@emotion/styled';

const theme = {
  colors: {
    primary: '#3498db',
    secondary: '#2ecc71'
  }
};

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

function App() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedButton>Themed Button</ThemedButton>
    </ThemeProvider>
  );
}

6. 總結​

Emotion 是一款靈活且高效的 CSS-in-JS 解決方案，適用於 React 應用。它提供 css prop 以及 styled API 來幫助開發者管理樣式，並支援全域樣式與主題設定。這篇教學筆記涵蓋了基礎概念與常見用法，希望對你的開發過程有所幫助。