什麼是樣式組件？

Styled Components 是一個流行的 React 函式庫，允許開發人員直接在 JavaScript 程式碼中編寫 CSS。該庫利用標記的模板文字來設計元件的樣式。它促進了元件級樣式的使用，有助於將樣式和元素結構的關注點分開，並使整體程式碼更易於維護。

使用樣式化組件的好處

1。動態樣式： 樣式化元件可讓您使用 JavaScript 根據 props、state 或任何其他變數動態設定樣式。

2.更好的組織： 讓樣式靠近它們影響的元件可以使您的程式碼更加模組化且更易於管理。

3.沒有類別名稱錯誤： 由於樣式的範圍僅限於元件，因此您不必擔心類別名稱衝突或傳統 CSS 中常見的特殊性問題。

4。主題支援： 樣式化元件提供內建的主題支持，讓您可以輕鬆地在應用程式中應用一致的樣式。

安裝樣式組件

要開始使用Styled Components，您需要透過npm或yarn安裝它：

npm install styled-components

or

yarn add styled-components

基本用法

這裡有一個基本範例來說明樣式化元件的工作原理：

import styled from "styled-components";

// Styled component named StyledButton
const StyledButton = styled.button`
  background-color: black;
  font-size: 32px;
  color: white;
`;

function Component() {
  // Use it like any other component.
  return  Login ;
}

依道具進行調整

樣式化元件具有功能性，因此我們可以輕鬆地動態設定元素樣式。

import styled from "styled-components";

const StyledButton = styled.button`
  min-width: 200px;
  border: none;
  font-size: 18px;
  padding: 7px 10px;
  /* The resulting background color will be based on the bg props. */
  background-color: ${props => props.bg === "black" ? "black" : "blue";
`;

function Profile() {
  return (
    

      Button A
      Button B
    
  )
}

主題化

樣式化元件還支援主題，可讓您定義一組樣式（如顏色、字體等）並在整個應用程式中一致地應用它們。

首先，定義主題：

import { ThemeProvider } from 'styled-components';

const theme = {
  primary: 'blue',
  secondary: 'gray',
};

然後，用 ThemeProvider 包裝您的應用程式並傳遞您的主題：

const App = () => (
  
    

      Primary Button
      Default Button
    
  
);

最後，存取樣式元件中的主題屬性：

const Button = styled.button`
  background: ${(props) => (props.primary ? props.theme.primary : props.theme.secondary)};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid ${(props) => props.theme.primary};
  border-radius: 3px;
`;

結論

Styled Components 對於希望提高應用程式的可維護性和可擴展性的 React 開發人員來說是一個強大的工具。透過將樣式封裝在元件中並充分利用 JavaScript 的強大功能，Styled Components 提供了一種現代且高效的 Web 應用程式樣式設計方法。無論您是在處理小型專案還是大型應用程序，樣式化組件都可以幫助您保持樣式井井有條和程式碼整潔。