整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
ss怎么引入html
在HTML中引入CSS的方法主要有四種：
1. 內(nèi)聯(lián)方式：直接在HTML標(biāo)簽中的style屬性中添加CSS，即采用行內(nèi)樣式。例如：<p style="color:red;">這是紅色文字</p>。這種方式的優(yōu)點(diǎn)是可以直接在HTML文件中看到效果，但缺點(diǎn)是不夠模塊化，不便于復(fù)用和維護(hù)。
2. 內(nèi)嵌樣式：使用<style>標(biāo)簽在HTML文檔頭部（<head>和<head>之間）定義CSS樣式。例如：
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>這是紅色文字</p>
</body>
這種方式的優(yōu)點(diǎn)是可以將CSS樣式與HTML內(nèi)容分離，提高代碼可讀性，但同樣存在復(fù)用和維護(hù)的問(wèn)題。
3. 鏈接式：使用<link>標(biāo)簽引入外部CSS樣式表文件。具體操作步驟如下：新建一個(gè)HTML文件和一個(gè)CSS文件，將新建的CSS文件保存在一個(gè)文件夾中，回到HTML文件中，在<title><title>下方添加<link>標(biāo)簽并設(shè)置其屬性為CSS文件的路徑，保存后便實(shí)現(xiàn)了引入外部CSS文件。這種方式的優(yōu)點(diǎn)是可以實(shí)現(xiàn)代碼的復(fù)用和維護(hù)，但需要提前準(zhǔn)備好CSS文件。
4. 導(dǎo)入式：使用@import命令導(dǎo)入外部CSS樣式表。例如：<style type="text/css"> @import"mystyle.css"; </style>。需要注意的是，這里的路徑需要是正確的。這種方式可以在同一個(gè)HTML文件中引入多個(gè)CSS文件，但瀏覽器對(duì)@import的支持程度不同，可能會(huì)出現(xiàn)兼容性問(wèn)題。
2024年選擇適合項(xiàng)目的CSS框架至關(guān)重要。這將為構(gòu)建新的用戶(hù)界面（UI）組件所需的總體努力定下基調(diào)。目前，最重要的是更快地發(fā)布新功能，以保持客戶(hù)的滿(mǎn)意度。因此，你需要一個(gè)易于使用的CSS框架，它能夠提供現(xiàn)成的UI元素。
下面，我們來(lái)看看2024年值得嘗試的最佳CSS框架。
在今天的數(shù)字時(shí)代，網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)已經(jīng)成為創(chuàng)造令人印象深刻在線(xiàn)體驗(yàn)的關(guān)鍵。為了滿(mǎn)足這一需求，Bootstrap 應(yīng)運(yùn)而生，它是一款以移動(dòng)為先的 CSS 框架，不僅能幫助你構(gòu)建外觀優(yōu)雅的響應(yīng)式網(wǎng)頁(yè)界面，還大大簡(jiǎn)化了開(kāi)發(fā)過(guò)程。
Bootstrap 的核心在于其強(qiáng)大的柵格系統(tǒng)，這一系統(tǒng)使得開(kāi)發(fā)者可以為各種屏幕尺寸創(chuàng)建靈活的布局。更重要的是，Bootstrap 提供了大量現(xiàn)成的組件，比如導(dǎo)航欄、卡片和模態(tài)框，這些都讓開(kāi)發(fā)變得更加迅速和高效。
Bootstrap 的獨(dú)特之處
如何將 Bootstrap 與現(xiàn)代框架結(jié)合使用
如果你在使用 React 開(kāi)發(fā)項(xiàng)目，可以輕松地將 React Bootstrap 庫(kù)安裝到你的項(xiàng)目中，通過(guò)這種方式，你可以在保持 React 的組件化開(kāi)發(fā)模式的同時(shí)，享受 Bootstrap 提供的樣式和組件優(yōu)勢(shì)。
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import Dropdown from 'react-bootstrap/Dropdown';
import DropdownButton from 'react-bootstrap/DropdownButton';
import './bootstrap.css';
export function Bootstrap() {
return (
<div className="button">
{['Primary', 'success', 'danger'].map((variant) => (
<DropdownButton
as={ButtonGroup}
key={variant}
id={dropdown-variants-${variant}}
variant={variant.toLowerCase()}
title={variant}
<Dropdown.Item eventKey="1">Action</Dropdown.Item>
<Dropdown.Item eventKey="2">Another action</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Active Item
</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
))}
<br />
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
}Tailwind CSS 以其獨(dú)樹(shù)一幟的“工具優(yōu)先”設(shè)計(jì)理念，在前端開(kāi)發(fā)社區(qū)中引起了廣泛關(guān)注。它與傳統(tǒng)的 CSS 框架不同，不提供預(yù)設(shè)樣式的組件，而是通過(guò)提供大量的低級(jí)實(shí)用類(lèi)（utility classes），讓開(kāi)發(fā)者能夠構(gòu)建出完全定制的設(shè)計(jì)。這種方法提供了前所未有的靈活性和可擴(kuò)展性，使得開(kāi)發(fā)者可以精準(zhǔn)控制網(wǎng)頁(yè)的每一個(gè)細(xì)節(jié)。
Tailwind CSS 的獨(dú)特特點(diǎn)
如何集成 Tailwind CSS
集成 Tailwind CSS 到項(xiàng)目中并非一蹴而就，首先需要設(shè)置 Tailwind 編譯器。通過(guò)在項(xiàng)目的配置文件中指定要處理的內(nèi)容和自定義主題，然后通過(guò)插件來(lái)擴(kuò)展功能，你可以開(kāi)始使用 Tailwind 提供的實(shí)用類(lèi)來(lái)編寫(xiě) CSS。
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}以下是相關(guān)的使用示例
export function Tailwind() {
const ContactTextArea = ({
row,
placeholder,
name,
defaultValue,
}: {
row: number;
placeholder: string;
name: string;
defaultValue: string;
}) => {
return (
<>
<div className="mb-6">
<textarea
rows={row}
placeholder={placeholder}
name={name}
className="w-full resize-none rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"
defaultValue={defaultValue}
/>
</div>
</>
);
};
const ContactInputBox = ({
type,
placeholder,
name,
}: {
type: string;
placeholder: string;
name: string;
}) => {
return (
<>
<div className="mb-6">
<input
type={type}
placeholder={placeholder}
name={name}
className="w-full rounded border border-stroke px-[14px] py-3 text-base text-body-color outline-none focus:border-primary dark:border-dark-3 dark:bg-dark dark:text-dark-6"
/>
</div>
</>
);
};
return (
<section className="relative z-10 overflow-hidden bg-white py-20 dark:bg-dark lg:py-[120px]">
<div className="w-full px-4 lg:w-1/2 xl:w-5/12">
<div className="relative rounded-lg bg-white p-8 shadow-lg dark:bg-dark-2 sm:p-12">
<form>
<ContactInputBox type="text" name="name" placeholder="Your Name" />
<ContactInputBox
type="text"
name="email"
placeholder="Your Email"
/>
<ContactInputBox
type="text"
name="phone"
placeholder="Your Phone"
/>
<ContactTextArea
row={6}
placeholder="Your Message"
name="details"
defaultValue=""
/>
<div>
<button
type="submit"
className="w-full rounded border border-primary bg-primary p-3 text-white transition hover:bg-opacity-90"
Send Message
</button>
</div>
</form>
<div />
</div>
</div>
</section>
);
}Foundation 是一款開(kāi)源的、響應(yīng)式的前端框架，它極大地簡(jiǎn)化了創(chuàng)建在任何設(shè)備上都能完美運(yùn)行的響應(yīng)式網(wǎng)站、應(yīng)用程序和電子郵件的過(guò)程。由于其出色的靈活性和易用性，F(xiàn)oundation 已被包括 Facebook、eBay、Mozilla、Adobe 乃至 Disney 在內(nèi)的許多公司采用于他們的項(xiàng)目中。
Foundation 提供了一個(gè)強(qiáng)大而靈活的響應(yīng)式柵格系統(tǒng)，并且包括了許多方便的選項(xiàng)、模態(tài)框（modals）、排版（typography）、導(dǎo)航組件以及表單元素，設(shè)計(jì)師可以快速將這些元素集成到他們的產(chǎn)品中。此外，F(xiàn)oundation 的模塊化架構(gòu)意味著你可以根據(jù)需要，使用它的部分或全部功能。
Foundation 的獨(dú)特特性
如何在項(xiàng)目中集成 Foundation
通過(guò)如下示例代碼，可以看到如何在 React 項(xiàng)目中使用 Foundation：
import { Menu, MenuItem } from 'react-foundation';
export function Foundation() {
return (
<Menu style={{ marginLeft: '34px' }}>
<MenuItem>
<a href="/">Home</a>
</MenuItem>
<MenuItem>
<a href="/">Blog</a>
</MenuItem>
<MenuItem>
<a href="/">About</a>
</MenuItem>
<MenuItem>
<a href="/">Contact</a>
</MenuItem>
</Menu>
);
}
這個(gè)例子展示了如何使用 Foundation 的 Menu 和 MenuItem 組件來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的導(dǎo)航菜單。這種集成方式使得在保持 React 組件化開(kāi)發(fā)模式的同時(shí)，還能享受 Foundation 提供的樣式和組件優(yōu)勢(shì)。
Bulma 是一個(gè)輕量級(jí)的 CSS 框架，以其簡(jiǎn)單性、響應(yīng)性和定制選項(xiàng)著稱(chēng)。它與其他 UI 框架的不同之處在于，Bulma 是基于 Flexbox 構(gòu)建的，F(xiàn)lexbox 是一種 CSS 布局模型，能夠根據(jù)容器的寬度調(diào)整頁(yè)面元素的寬度，這使得創(chuàng)建網(wǎng)格等任務(wù)變得非常簡(jiǎn)單，并且是框架輕量化的原因之一。
Bulma 的主要特點(diǎn)
如何在項(xiàng)目中集成 Bulma
將 Bulma 集成到項(xiàng)目中相當(dāng)簡(jiǎn)單，只需導(dǎo)入 Bulma 的 CSS 文件即可開(kāi)始使用它提供的各種樣式和組件。以下是一個(gè)使用 Bulma 創(chuàng)建分頁(yè)導(dǎo)航的示例：
import 'bulma/css/bulma.min.css';
export function Bulma() {
return (
<div>
<nav className="pagination" role="navigation" aria-label="pagination">
<a href="/" className="pagination-previous">
Previous
</a>
<a href="/" className="pagination-next">
Next Page
</a>
<ul className="pagination-list">
<li>
<a href="/" className="pagination-link" aria-label="Goto page 1">
1
</a>
</li>
<li>
<span className="pagination-ellipsis">…</span>
</li>
<li>
<a href="/" className="pagination-link" aria-label="Goto page 45">
45
</a>
</li>
<li>
<a
href="/"
className="pagination-link is-current"
aria-label="Page 46"
aria-current="page"
46
</a>
</li>
<li>
<a href="/" className="pagination-link" aria-label="Goto page 47">
47
</a>
</li>
<li>
<span className="pagination-ellipsis">…</span>
</li>
<li>
<a href="/" className="pagination-link" aria-label="Goto page 86">
86
</a>
</li>
</ul>
</nav>
</div>
);
}
這個(gè)例子展示了如何利用 Bulma 的分頁(yè)組件來(lái)創(chuàng)建一個(gè)簡(jiǎn)潔美觀的分頁(yè)導(dǎo)航。通過(guò)使用 Bulma，開(kāi)發(fā)者可以節(jié)省大量的時(shí)間來(lái)設(shè)計(jì)和編寫(xiě) CSS，專(zhuān)注于實(shí)現(xiàn)更好的用戶(hù)體驗(yàn)和界面設(shè)計(jì)。
UIKit 是一個(gè)開(kāi)源的框架，專(zhuān)門(mén)用于構(gòu)建 Web 應(yīng)用程序的用戶(hù)界面。它與其他 UI 框架在結(jié)構(gòu)和設(shè)計(jì)哲學(xué)上有所不同。不同于其他遵循傳統(tǒng) BEM 方法論的框架，UIKit 采用了基于組件的結(jié)構(gòu)。這種方式為組件的靈活性和可重用性提供了更大的空間，可以顯著減少構(gòu)建復(fù)雜用戶(hù)界面所需的代碼量。
UIKit 的主要特性
如何在項(xiàng)目中集成 UIKit
將 UIKit 集成到項(xiàng)目中非常直接，僅需導(dǎo)入 UIKit 的 CSS 文件即可開(kāi)始使用其提供的樣式和組件。以下是一個(gè)使用 UIKit 創(chuàng)建按鈕的示例：
import 'uikit/dist/css/uikit.min.css';
export function Uikit() {
return (
<div className="uk-flex uk-flex-center uk-margin-top">
<button
type="button"
className="uk-button uk-button-default uk-margin-left"
onClick={() => alert('Cancel clicked!')}
>
Cancel
</button>
</div>
);
}
這個(gè)例子演示了如何利用 UIKit 的按鈕（Button）組件來(lái)創(chuàng)建一個(gè)簡(jiǎn)單的按鈕，并使用 Flexbox 實(shí)現(xiàn)居中布局。通過(guò) UIKit，開(kāi)發(fā)者可以享受到高度靈活和易用的界面構(gòu)建體驗(yàn)，同時(shí)也能保持代碼的整潔和模塊化。
選擇合適的 CSS 框架對(duì)于項(xiàng)目的成功至關(guān)重要。每個(gè)框架都有其獨(dú)特的特點(diǎn)、優(yōu)勢(shì)和可能的限制，因此了解如何根據(jù)項(xiàng)目的具體需求挑選合適的框架是一項(xiàng)重要的技能。除了我們討論的 Bootstrap、Tailwind CSS、Foundation、Bulma 和 UIKit 外，市面上還有許多其他的 CSS 框架，每個(gè)都有可能成為你項(xiàng)目的理想選擇。
創(chuàng)建概念驗(yàn)證
創(chuàng)建概念驗(yàn)證（Proof-of-Concept，PoC）是評(píng)估 CSS 框架是否適合你項(xiàng)目的一個(gè)極好方法。通過(guò)這種方式，你可以實(shí)際操作并體驗(yàn)每個(gè)框架的學(xué)習(xí)曲線(xiàn)、靈活性、易用性以及它們?nèi)绾芜m應(yīng)你的項(xiàng)目需求。以下是一些建議，幫助你通過(guò)創(chuàng)建概念驗(yàn)證來(lái)選擇正確的 CSS 框架：
通過(guò)這種綜合評(píng)估方法，你可以更全面地理解每個(gè)框架如何適應(yīng)你的項(xiàng)目需求，從而做出明智的選擇。記住，最適合項(xiàng)目的框架不一定是最流行或最新的，而是最能滿(mǎn)足你項(xiàng)目特定需求的那一個(gè)。分享你的概念驗(yàn)證經(jīng)驗(yàn)和框架選擇理由，不僅能幫助團(tuán)隊(duì)成員理解決策過(guò)程，也能為面臨相似選擇的其他開(kāi)發(fā)者提供參考。
React以其聲明式編程范式和組件化架構(gòu)，成為了構(gòu)建用戶(hù)界面的首選技術(shù)之一。然而，隨著項(xiàng)目規(guī)模的擴(kuò)大和設(shè)計(jì)需求的多樣化，如何高效地管理 CSS 樣式成為了每個(gè)React開(kāi)發(fā)者都需要面對(duì)的挑戰(zhàn)。
本文將從一下三個(gè)方面進(jìn)行介紹，探討如何在 React 中應(yīng)用和管理樣式，包括內(nèi)聯(lián)樣式、CSS 類(lèi)、CSS Modules 和 CSS-in-JS 技術(shù)，提升界面美觀和開(kāi)發(fā)效率。
在 React 中，組件樣式指的是如何為每個(gè)獨(dú)立的組件定義和管理視覺(jué)表現(xiàn)。組件樣式的設(shè)計(jì)和應(yīng)用是 React 開(kāi)發(fā)中的關(guān)鍵部分，它決定了應(yīng)用的外觀和用戶(hù)體驗(yàn)。
在 React 中，內(nèi)聯(lián)樣式是一種直接在元素上定義 CSS 樣式的方式，類(lèi)似于在 HTML 中使用 style 屬性。不同的是，在 React 中，內(nèi)聯(lián)樣式是通過(guò)一個(gè) JavaScript 對(duì)象來(lái)定義的，而不是傳統(tǒng)的 CSS 字符串。這使得內(nèi)聯(lián)樣式在 React 中具有更強(qiáng)的動(dòng)態(tài)性和靈活性。
在 React 中，內(nèi)聯(lián)樣式通過(guò)元素的 style 屬性來(lái)設(shè)置，該屬性接受一個(gè) JavaScript 對(duì)象。對(duì)象的鍵是 CSS 屬性名（使用駝峰命名法），值是對(duì)應(yīng)的樣式值；如下：
import React from 'react';
function InlineStyles() {
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray',
padding: '10px',
};
return <div style={divStyle}>Hello, World!</div>;
}
export default InlineStyles;在這個(gè)例子中，divStyle 是一個(gè)包含樣式屬性的 JavaScript 對(duì)象，并通過(guò) style 屬性應(yīng)用到 div 元素上。
效果如下：
在 React 的內(nèi)聯(lián)樣式中，CSS 屬性名使用駝峰命名法（camelCase），而不是傳統(tǒng)的 CSS 短橫命名法（kebab-case）。例如：
內(nèi)聯(lián)樣式可以非常方便地實(shí)現(xiàn)動(dòng)態(tài)樣式。你可以根據(jù)組件的狀態(tài)或?qū)傩詠?lái)動(dòng)態(tài)地改變樣式。
import React, { useState } from 'react';
function DynamicStyles() {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(!isActive);
};
const divStyle = {
color: isActive ? 'red' : 'blue',
backgroundColor: 'lightgray',
padding: '10px',
cursor: 'pointer',
userSelect: 'none',
};
return (
<div style={divStyle} onClick={handleClick}>
Click me to change color!
</div>
);
}
export default DynamicStyles;在這個(gè)例子中，當(dāng)點(diǎn)擊 div 元素時(shí)會(huì)切換其文本顏色。效果圖如下：
React允許將多個(gè)樣式對(duì)象合并為一個(gè)，這在需要應(yīng)用多個(gè)條件樣式時(shí)非常有用：
const baseStyle = { padding: '10px', margin: '5px' };
const activeStyle = { backgroundColor: 'green' };
// 合并樣式
const finalStyle = { ...baseStyle, ...activeStyle };
// ...
<div style={finalStyle} />內(nèi)聯(lián)樣式的優(yōu)缺點(diǎn):
優(yōu)點(diǎn):
缺點(diǎn):
與內(nèi)聯(lián)樣式相比，使用 CSS 類(lèi)樣式可以使代碼更清晰、可維護(hù)性更高。
/* common.css */
.container {
color: blue;
background-color: lightgray;
padding: 10px;
}
.active {
color: red;
}在 React 組件中引入 CSS 文件 在你的 React 組件中，使用 import 語(yǔ)句引入剛剛創(chuàng)建的 CSS 文件：
import { useState } from 'react';
import '../assets/styles/common.css';
function ClassStyles() {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(!isActive);
};
return (
<div
className={`container ${isActive ? 'active' : ''}`}
onClick={handleClick}>
Click me to change color!
</div>
);
}
export default ClassStyles;可以使用條件渲染的方法動(dòng)態(tài)添加或移除 CSS 類(lèi)。例如，使用三元運(yùn)算符或條件運(yùn)算符：
<div
className={`container ${isActive ? 'active' : ''}`}
onClick={handleClick}>
Click me to change color!
</div>或者，使用 classnames、clsx 庫(kù)來(lái)處理復(fù)雜的類(lèi)名邏輯，下面用 classnames 做個(gè)演示：
import { useState } from 'react';
import classNames from 'classnames';
function ClassnamesStyles() {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(!isActive);
};
return (
<div
className={classNames('container', { active: isActive })}
onClick={handleClick}>
Click me to change color!
</div>
);
}
export default ClassnamesStyles;然后在 App.jsx 中引入 ClassnamesStyles 組件；在這個(gè)示例中，classnames 庫(kù)使得根據(jù)條件判斷類(lèi)名的處理更加簡(jiǎn)潔和易讀。效果如下：
為了避免全局樣式?jīng)_突，React 推薦使用 CSS 模塊（CSS Modules），它允許你將 CSS 類(lèi)名限定在本地作用域內(nèi)。
/* page.module.css */
.container {
color: blue;
background-color: lightgray;
padding: 10px;
}
.active {
color: red;
}在 React 組件中引入和使用 CSS 模塊
import { useState } from 'react';
import styles from '../assets/styles/page.module.css';
function CssModuleStyles() {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(!isActive);
};
return (
<div
className={`${styles.container} ${isActive ? styles.active : ''}`}
onClick={handleClick}>
Click me to change color!
</div>
);
}
export default CssModuleStyles;優(yōu)缺點(diǎn)對(duì)比
優(yōu)點(diǎn):
缺點(diǎn):
在 React 中，Styled Components 和 CSS-in-JS 是用于管理和應(yīng)用樣式的現(xiàn)代解決方案。它們旨在使樣式更加模塊化、可復(fù)用和動(dòng)態(tài)化。
Styled Components 是一個(gè)流行的 CSS-in-JS 庫(kù)，它使用 ES6 的模板字符串語(yǔ)法來(lái)定義組件級(jí)別的樣式。通過(guò)使用 Styled Components，你可以將組件的樣式與其邏輯緊密結(jié)合，使得樣式更加模塊化和可維護(hù)。
$ npm install styled-components以下是如何在 React 中使用 Styled Components：
import { useState } from 'react';
import styled from 'styled-components';
// 定義一個(gè)帶有樣式的容器組件
const Container = styled.div`
/* 根據(jù) props.isActive 設(shè)置顏色 */
color: ${props => (props.isActive ? 'red' : 'blue')};
background-color: lightgray;
padding: 10px;
cursor: pointer;
transition: color 0.3s;
`;
const Button = styled.button`
/* 根據(jù) props.primary 設(shè)置按鈕樣式 */
background: ${props => (props.$primary ? '#BF4F74' : 'white')};
color: ${props => (props.$primary ? 'white' : '#BF4F74')};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid #bf4f74;
border-radius: 3px;
`;
function StyledComponentsStyles() {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(!isActive);
};
return (
<main>
<Container isActive={isActive}>Click me to change color!</Container>
<Button onClick={handleClick} $primary={isActive}>
Primary
</Button>
</main>
);
}
export default StyledComponentsStyles;效果如下：
CSS-in-JS 是一種將 CSS 樣式直接寫(xiě)在 JavaScript 文件中的技術(shù)。Styled Components 是 CSS-in-JS 的實(shí)現(xiàn)之一，但還有其他庫(kù)和方法可以實(shí)現(xiàn) CSS-in-JS，例如 emotion、styled-jsx 等。
優(yōu)點(diǎn)
缺點(diǎn)
其他 CSS-in-JS 庫(kù)
$ npm install @emotion/react在使用 emotion 方案的 jsx 文件開(kāi)頭加入一行 /** @jsxImportSource @emotion/react **/ 的 JSX Pragma（編譯指示），告訴 JS 編譯器使用 @emotion/react 包來(lái)替代 React 原生的jsx 運(yùn)行時(shí)。
/* @jsxImportSource @emotion/react */
import React from 'react';
import { css } from '@emotion/react';
const color = 'white';
function EmotionStyles() {
return (
<div
css={css`
padding: 32px;
font-size: 16px;
background-color: hotpink;
font-size: 24px;
border-radius: 4px;
&:hover {
color: ${color};
}
`}>
Hover to change color.
</div>
);
}
export default EmotionStyles;效果如下：
emotion 也支持了 style-components 的方案，不過(guò)要安裝一下依賴(lài)：npm i @emotion/styled，使用示例如下：
/* @jsxImportSource @emotion/react */
import { useState } from 'react';
import styled from '@emotion/styled';
const Container = styled.div`
color: ${props => (props.isActive ? 'red' : 'blue')};
background-color: lightgray;
padding: 10px;
cursor: pointer;
transition: color 0.3s;
`;
function EmotionStyledStyles() {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(!isActive);
};
return (
<Container isActive={isActive} onClick={handleClick}>
Click me to change color!
</Container>
);
}
export default EmotionStyledStyles;效果如下：
Styled Components 和 CSS-in-JS 是現(xiàn)代 React 開(kāi)發(fā)中非常流行的樣式解決方案。它們提供了模塊化、動(dòng)態(tài)化和高可維護(hù)性的樣式管理方式。根據(jù)項(xiàng)目需求選擇合適的方案，可以顯著提高開(kāi)發(fā)效率和代碼質(zhì)量。
在 React 項(xiàng)目中，有許多不同的樣式管理工具和庫(kù)可供選擇。以下是一些常見(jiàn)的選擇：
選擇合適的樣式管理工具取決于你的項(xiàng)目需求、團(tuán)隊(duì)的熟悉度以及具體的使用場(chǎng)景。
原文轉(zhuǎn)自：https://juejin.cn/post/7384992844191154214
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
