家好,很高興又見面了,我是"高級前端?進階?",由我帶著大家一起關注前端前沿、深入前端底層技術,大家一起進步,也歡迎大家關注、點贊、收藏、轉發,您的支持是我不斷創作的動力。
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小時內與您取得聯系。