資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 React 中使用 Material UI 新增樣式元件？
Styled Components 是 React 生態系統中一個備受讚譽的庫，它使開發者能夠使用 CSS-in-JS，從而帶來封裝性、可重用性和簡化樣式維護等優勢。另一方面，Material-UI 是一個廣泛使用的 React UI 元件庫，它嚴格遵循 Material Design 的原則。它提供了大量可自定義的預構建元件。雖然 Material-UI 自帶了一個名為 makeStyles 的樣式解決方案，但它可以與 Styled Components 無縫整合，使開發者能夠利用這兩個庫的組合功能。
我們的探索圍繞安裝過程展開，重點介紹了 @mui/styled-engine 和 @mui/styled-engine-sc 包。這些包使開發者能夠在為 Material UI 元件設定樣式時選擇 Emotion 或 Styled Components。本指南透過清晰的程式碼示例和全面的說明，使開發者能夠掌握使用樣式元件的知識，從而在 Material UI 框架內建立視覺效果出眾且易於維護的使用者介面。
在本篇綜合指南中，我們將深入探討如何利用 React 的強大功能，將樣式元件無縫整合到 Material UI 中。
樣式元件到底是什麼？
Styled Components 是 React 生態系統中一個著名的庫，它使開發者能夠編寫 CSS-in-JS，從而能夠直接在 JavaScript 程式碼中定義和應用樣式。這種創新方法提供了許多優勢，包括封裝性、可重用性和簡化樣式維護。
另一方面，Material-UI 是一個廣泛使用的 React UI 元件庫，它嚴格遵循 Material Design 的指南。它為開發者提供了一個廣泛的預構建元件集合，所有這些元件都是可自定義的，從而有助於建立視覺效果出眾的使用者介面。儘管 Material-UI 有自己名為 makeStyles 的樣式解決方案，但它與 Styled Components 完全相容，允許開發者利用這兩個庫的組合潛力。
Emotion 庫是用於為 Material UI 元件生成 CSS 樣式的預設樣式解決方案。每個 Material UI 元件都依賴於 styled() API 來將 CSS 無縫注入頁面。此 API 受各種流行的樣式庫支援，從而提供了在 Material UI 框架內輕鬆切換它們的功能。
安裝過程
要開始將 Styled Components 整合到 Material-UI 中，必須安裝一系列必需的包。如果您的專案中已經存在 Styled Components，則可以只使用它們。Material-UI 提供了兩個不同的包可供選擇：@mui/styled-engine 和 @mui/styled-engine-sc。
前者是預設包，包含 Emotion 的 styled() API 和補充實用程式。後者則是一個類似的包裝器，專門為 Styled Components 設計。根據您的喜好和需求，您可以輕鬆配置您的專案以使用任一包。
透過 npm 安裝
$ npm install @mui/material @mui/styled-engine-sc styled-components
配置
配置在 React 專案的 webpack.config.js 檔案中完成。
module.exports = {
//...
+ resolve: {
+ alias: {
+ '@mui/styled-engine': '@mui/styled-engine-sc'
+ },
+ },
};
透過 yarn 安裝
$ yarn add @mui/material @mui/styled-engine-sc styled-components
配置
配置在 React 專案的 package.json 檔案中完成。
{
"dependencies": {
- "@mui/styled-engine": "latest"
+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
},
+ "resolutions": {
+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
+ },
}
在 Next.js 中安裝
$ npx create-next-app@11.1.0 $ cd my-next-app $ yarn add @mui/material @mui/styled-engine-sc styled-components
在 Material-UI 中實現 Styled Components
要將 Styled Components 整合到 Material UI 中，您可以輕鬆地為每個 Material UI 元件應用自定義樣式。透過使用 Styled Components 提供的 styled 函式，您可以為元件定義樣式。
您建立的 CSS 規則將僅限於其元件，這確保了樣式不會相互衝突。此外，您可以選擇透過擴充套件 Material UI 元件並向其應用樣式來建立樣式元件。這確保了整個應用程式的視覺效果。
示例 1
在給定示例中使用 styled engine sc 包時，開發者可以使用 @mui/system 包中的 styled 函式。此函式允許透過將 CSS-in-JS 物件作為輸入來建立樣式元件。
//import react and styled component from styled-engine-sc
import * as React from "react";
import { styled } from "@mui/system";
//create a styled div
const StyledDiv = styled("div")`
display: flex;
flex-direction: column;
width: 40em;
gap: 2em;
`;
//create a styled text area input
const StyledTextArea = styled("textarea")`
padding: 10px;
border: 1px solid green;
border-radius: 4px;
height: 10em;
`;
//create a styled button
const StyledButton = styled("button")`
background-color: #189e02;
color: #fff;
box-shadow: 0 4px 6px green, 0 1px 3px black;
padding: 7px 14px;
border-radius: 5px;
&:hover {
background-color: #18ac00;
}
`;
//main function App component
function App() {
return (
<StyledDiv>
<h1>Styling Material UI using Styled Components</h1>
<StyledTextArea />
<StyledButton>Add</StyledButton>
</StyledDiv>
);
}
export default App;
輸出
示例 2
當您在給定示例中使用 styled engine 包作為開發者時，您可以訪問建立樣式元件的深入 API。此包還使您能夠使用 @mui/styled engine 中的 createStyled 函式建立自定義樣式引擎。透過使用 styled engine 包，開發者可以靈活地控制樣式引擎，從而能夠根據自己的需求和偏好自定義它。
//import react and styled component from styled-engine
import * as React from "react";
import { styled } from "@mui/material/styles";
//create a styled div
const StyledDiv = styled("div")`
display: flex;
flex-direction: column;
width: 40em;
gap: 2em;
`;
//create a styled input for email
const StyledInputEmail = styled("input")`
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
`;
//create a styled input for password
const StyledInputPass = styled("input")`
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
`;
//create a styled button
const StyledButton = styled("button")`
background-color: #189e02;
color: #fff;
box-shadow: 0 4px 6px green, 0 1px 3px black;
padding: 7px 14px;
border-radius: 5px;
&:hover {
background-color: #18ac00;
}
`;
//
function App() {
return (
<StyledDiv>
<h1>Styling Material UI using Styled Components</h1>
<StyledInputEmail type="email" placeholder="Enter your email" />
<StyledInputPass type="password" placeholder="Enter your password" />
<StyledButton>Submit</StyledButton>
</StyledDiv>
);
}
export default App;
輸出
結論
本文提供了有關使用 React 將樣式元件整合到 Material UI 中的見解。憑藉其 CSS-in-JS 方法，樣式元件為開發者提供了封裝性、可重用性和簡化樣式維護等優勢。Material UI 是一個遵循 Material Design 原則的 UI 元件庫，它提供了一系列可輕鬆自定義的預構建元件。
為了利用這兩個庫的組合潛力，開發者可以。配置 @mui/styled engine sc 或 @mui/styled engine 包。這些包允許在 Material UI 框架內使用樣式元件作為樣式解決方案。透過提供程式碼示例和詳細說明，本指南使開發者能夠建立視覺效果吸引人且易於管理的使用者介面。
151 次檢視
