整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力。
A new, better and faster way to write visual components. CSS-in-JS? Nope! JS-from-CSS
MistCSS 是一種新的、更好、更快的編寫可視化組件的方法，其拋棄了傳統的 CSS-in-JS 而采用 JS-from-CSS， 支持 Next.js、Remix 和 TailwindCSS 等等。
MistCSS 的典型特征包括：
與 CSS-in-JS 工具不同，MistCSS 不需要代碼編輯器擴展，沒有 API 限制，也沒有學習曲線，可以完全訪問 CSS 的強大功能。
MistCSS 允許編寫更簡潔的代碼，樣式的作用域類似于 CSS Module，并且視覺行為位于同一位置，類似于 CSS-in-JS。同時，MistCSS 的運行時為零，不會給項目增加任何開銷。
目前 MistCSS 在 Github 通過 MIT 協議開源，是一個值得關注的前端開源項目。
通過示例可以更好地理解 MistCSS，以下代碼創建一個接受兩個 props 的經典 Button 組件：
// src/Button.mist.css
@scope (.button) {
button:scope {
/* Default style */
font-size: 1rem;
border-radius: 0.25rem;
&[data-size='lg'] {
font-size: 1.5rem;
}
&[data-size='sm'] {
font-size: 0.75rem;
}
&[data-danger] {
background-color: red;
color: white;
}
}
}注意：@scope 中的類在項目中必須是唯一的，后續會添加自動檢查功能
上面的 CSS 代碼是 標準且有效的， MistCSS 沒有引入任何專有語法。因此，代碼編輯器本身就支持。然后執行下面的命令進行編譯：
npx mistcss ./src
// Button.mist.tsx will be created此時編譯器會自動生成如下圖所示的代碼，和往常自己寫 Button 組件非常類似，但是思路卻完全反過來，即通過寫樣式文件來反向生成組件！
接著就可以像下面一樣導入 Button 組件:
import {Button} from '.components/Button.mist'
export default const App = () => (
<main>
{/* 像普通組件一樣使用 React component */}
<Button size="lg">Submit</Button>
<Button size="lg" danger>Delete</Button>
<Button onClick={handleClick}>Cancel</Button>
{/* TypeScript will catch the wrong size here */}
<Button size="foo">Oops</Button>
</main>
)通過上面的步驟，一個視覺和類型安全的 React 組件就完成了，無需任何額外 JS 代碼?。
由于 MistCSS 使用純 CSS，因此開發者不受限制可以直接使用所有 CSS 功能：
當然，也可以在 MistCSS 組件中使用 TailwindCSS 實用程序類。
https://github.com/typicode/mistcss
https://typicode.github.io/mistcss/
https://twitter.com/argyleink/status/1769741521270583393/photo/4
React以其聲明式編程范式和組件化架構，成為了構建用戶界面的首選技術之一。然而，隨著項目規模的擴大和設計需求的多樣化，如何高效地管理 CSS 樣式成為了每個React開發者都需要面對的挑戰。
本文將從一下三個方面進行介紹，探討如何在 React 中應用和管理樣式，包括內聯樣式、CSS 類、CSS Modules 和 CSS-in-JS 技術，提升界面美觀和開發效率。
在 React 中，組件樣式指的是如何為每個獨立的組件定義和管理視覺表現。組件樣式的設計和應用是 React 開發中的關鍵部分，它決定了應用的外觀和用戶體驗。
在 React 中，內聯樣式是一種直接在元素上定義 CSS 樣式的方式，類似于在 HTML 中使用 style 屬性。不同的是，在 React 中，內聯樣式是通過一個 JavaScript 對象來定義的，而不是傳統的 CSS 字符串。這使得內聯樣式在 React 中具有更強的動態性和靈活性。
在 React 中，內聯樣式通過元素的 style 屬性來設置，該屬性接受一個 JavaScript 對象。對象的鍵是 CSS 屬性名（使用駝峰命名法），值是對應的樣式值；如下：
import React from 'react';
function InlineStyles() {
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray',
padding: '10px',
};
return <div style={divStyle}>Hello, World!</div>;
}
export default InlineStyles;在這個例子中，divStyle 是一個包含樣式屬性的 JavaScript 對象，并通過 style 屬性應用到 div 元素上。
效果如下：
在 React 的內聯樣式中，CSS 屬性名使用駝峰命名法（camelCase），而不是傳統的 CSS 短橫命名法（kebab-case）。例如：
內聯樣式可以非常方便地實現動態樣式。你可以根據組件的狀態或屬性來動態地改變樣式。
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;在這個例子中，當點擊 div 元素時會切換其文本顏色。效果圖如下：
React允許將多個樣式對象合并為一個，這在需要應用多個條件樣式時非常有用：
const baseStyle = { padding: '10px', margin: '5px' };
const activeStyle = { backgroundColor: 'green' };
// 合并樣式
const finalStyle = { ...baseStyle, ...activeStyle };
// ...
<div style={finalStyle} />內聯樣式的優缺點:
優點:
缺點:
與內聯樣式相比，使用 CSS 類樣式可以使代碼更清晰、可維護性更高。
/* common.css */
.container {
color: blue;
background-color: lightgray;
padding: 10px;
}
.active {
color: red;
}在 React 組件中引入 CSS 文件 在你的 React 組件中，使用 import 語句引入剛剛創建的 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;可以使用條件渲染的方法動態添加或移除 CSS 類。例如，使用三元運算符或條件運算符：
<div
className={`container ${isActive ? 'active' : ''}`}
onClick={handleClick}>
Click me to change color!
</div>或者，使用 classnames、clsx 庫來處理復雜的類名邏輯，下面用 classnames 做個演示：
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 組件；在這個示例中，classnames 庫使得根據條件判斷類名的處理更加簡潔和易讀。效果如下：
為了避免全局樣式沖突，React 推薦使用 CSS 模塊（CSS Modules），它允許你將 CSS 類名限定在本地作用域內。
/* 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;優缺點對比
優點:
缺點:
在 React 中，Styled Components 和 CSS-in-JS 是用于管理和應用樣式的現代解決方案。它們旨在使樣式更加模塊化、可復用和動態化。
Styled Components 是一個流行的 CSS-in-JS 庫，它使用 ES6 的模板字符串語法來定義組件級別的樣式。通過使用 Styled Components，你可以將組件的樣式與其邏輯緊密結合，使得樣式更加模塊化和可維護。
$ npm install styled-components以下是如何在 React 中使用 Styled Components：
import { useState } from 'react';
import styled from 'styled-components';
// 定義一個帶有樣式的容器組件
const Container = styled.div`
/* 根據 props.isActive 設置顏色 */
color: ${props => (props.isActive ? 'red' : 'blue')};
background-color: lightgray;
padding: 10px;
cursor: pointer;
transition: color 0.3s;
`;
const Button = styled.button`
/* 根據 props.primary 設置按鈕樣式 */
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 樣式直接寫在 JavaScript 文件中的技術。Styled Components 是 CSS-in-JS 的實現之一，但還有其他庫和方法可以實現 CSS-in-JS，例如 emotion、styled-jsx 等。
優點
缺點
其他 CSS-in-JS 庫
$ npm install @emotion/react在使用 emotion 方案的 jsx 文件開頭加入一行 /** @jsxImportSource @emotion/react **/ 的 JSX Pragma（編譯指示），告訴 JS 編譯器使用 @emotion/react 包來替代 React 原生的jsx 運行時。
/* @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 的方案，不過要安裝一下依賴：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 是現代 React 開發中非常流行的樣式解決方案。它們提供了模塊化、動態化和高可維護性的樣式管理方式。根據項目需求選擇合適的方案，可以顯著提高開發效率和代碼質量。
在 React 項目中，有許多不同的樣式管理工具和庫可供選擇。以下是一些常見的選擇：
選擇合適的樣式管理工具取決于你的項目需求、團隊的熟悉度以及具體的使用場景。
原文轉自：https://juejin.cn/post/7384992844191154214
SS(Cascading Style Sheets) ，層疊樣式表（級聯樣式表），用于設置HTML頁面中的文本內容的字體、大小、對齊方式等，圖片的寬高、邊框樣式、邊距等以及頁面的布局排版等各種外觀顯示樣式。
CSS以HTML為基礎，可以針對不同的瀏覽器設置不同的樣式。CSS的出現可以說拯救了我們的頁面，讓HTML 專注去做結構呈現， 而樣式全部交給 CSS來美化。
CSS樣式規則，具體格式如下：
CSS語法由兩部分組成：選擇器和聲明。 聲明包括：屬性和屬性值
選擇符 {屬性: 屬性值 ; 屬性:屬性值}
規則：
CSS放到什么位置呢？ 怎么讓它跟我們的HTML文件關聯起來呢？
內聯樣式，又稱行內樣式、行間樣式、內嵌樣式。是通過標簽的style屬性來設置元素的樣式。
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>
<h2 style="color:red;">
紅色標題
</h2>
內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義
當我們頁面比較復雜，大量的內部樣式，會導致頁面看上去不美觀，而且不利于維護。這時我們通常將所有的樣式放在一個或多個以 .CSS 為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中。
樣式表 | 特點 | 使用 | 控制范圍 | 優先級 |
行內樣式表 | 書寫方便，權重高 | 較少 | 控制單個標簽（小） | 高 |
內部樣式表 | 結構和樣式部分分離 | 較多 | 控制一個頁面（中） | 與書寫的順序有關，后書寫的高 |
外部樣式表 | 結構和樣式完全分離，需要引入 | 最多，推薦使用 | 控制整個網站（多） | 與書寫的順序有關，后書寫的高 |
網頁中的標簽很多，為了更好的完成我們的網頁布局，我們需要在不同地方會放不同類型的標簽。
根據標簽在網頁中的顯示模式，可以將HTML標簽一般分為塊級標簽和行內標簽兩種類型，即塊元素和行內元素。
鏈接里面不能再放鏈接！
通過設置display的值，改變元素的顯示模式。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
