掌握樣式元件：React 的動態和模組化樣式-js教程-PHP中文網

Mastering Styled Components: Dynamic and Modular Styling for React

樣式化元件：深入研究 React 的 CSS-in-JS

樣式化元件 是 React 中 CSS-in-JS 最受歡迎的函式庫之一。它允許開發人員在 JavaScript 檔案中編寫實際 CSS 程式碼，然後使用它來設計 React 元件的樣式。樣式化元件增強了傳統的 CSS 方法，使您能夠將樣式範圍限定到元件，使樣式更加模組化和動態。

什麼是樣式組件？

樣式化元件使用標記範本文字來定義CSS規則並將它們直接與React元件關聯。這種方法提供了一種建構元件級樣式的方法，這些樣式是隔離和封裝的，避免了樣式衝突。它還支援基於 props 的動態樣式，實現更大的靈活性。

樣式組件的主要特徵：

元件級樣式：樣式的範圍僅限於元件，消除了全域樣式的問題並減少了 CSS 衝突。
動態樣式：樣式化元件可讓您根據傳遞給元件的 props 動態修改樣式。
自動供應商前綴：它會自動添加供應商前綴以實現更好的跨瀏覽器相容性，因此您不必擔心支援多個瀏覽器。
主題支援：它支援使用主題系統，允許您管理應用程式中的全域樣式，例如顏色、排版和間距。
沒有類別名稱衝突：由於每個樣式元件都有唯一的類別名稱，因此不會出現全域類別名稱衝突。
伺服器端渲染（SSR）支援：Styled Components 內建了對 SSR 的支持，可以幫助您改善 React 應用程式的初始載入時間和 SEO。

安裝樣式組件

要在 React 專案中使用 Styled Components，您需要先安裝它：

npm install styled-components

登入後複製

基本範例：

這是一個簡單的範例，我們使用樣式元件定義樣式按鈕元件：

npm install styled-components

登入後複製

說明：

styled.button 用於建立樣式按鈕元件。這是Styled Components提供的功能。
在反引號內，我們定義了按鈕的 CSS，可以根據 props 進行自訂。
傳遞主要屬性以有條件地更改按鈕的背景顏色。如果primary prop為true，則背景顏色為藍色；否則，它是灰色的。
&:hover 選擇器定義按鈕的懸停效果。

帶道具的動態樣式

Styled Components 允許基於傳遞給元件的 props 進行動態樣式設定。您可以根據組件的任何屬性變更樣式。

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

// Define a styled component using tagged template literals
const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

登入後複製

說明：

在這個範例中，primary 和disabled 屬性用來修改Button 的樣式。
背景顏色、顏色、遊標和不透明度屬性會根據道具而變化。

使用樣式元件進行主題化

樣式元件的一大特點是它能夠管理全域主題。您可以定義主題並在元件中使用它以實現一致的樣式。

定義主題：

npm install styled-components

登入後複製

使用 ThemeProvider 應用主題：

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

// Define a styled component using tagged template literals
const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

登入後複製