React使用emotion寫css代碼
簡介：
emotion是一個JavaScript庫，使用emotion可以用寫js的方式寫css代碼。在react中安裝emotion后，可以很方便進(jìn)行css的封裝，復(fù)用。使用emotion后，瀏覽器渲染出來的標(biāo)簽是會加上一個css開頭的標(biāo)識。如下：截圖中以css-開頭的幾個標(biāo)簽，就是使用emotion庫后渲染出來的。
下面就從安裝到使用，介紹下emotion在工程中的應(yīng)用。
emotion的安裝：
yarn add @emotion/react yarn add @emotion/styled
新增普通css組件：
1，命名和組件一樣，大寫字母開頭
2，styled后面跟html標(biāo)簽
// 引入emotion import styled from "@emotion/styled”;
// 使用emotion 創(chuàng)建css組件 const Container = styled.div` display: flex; flex-direction: column; align-items: center; min-height: 100vh; `;
//在html代碼中使用css組件： <Container> // html代碼 </Container>
給已存在組件加樣式：
1，變量名首字符大寫
2，將已經(jīng)存在的組件作為參數(shù)傳入styled
3，樣式代碼可以加參數(shù)
// Card 是antd已存在的組件
const ShadowCard = styled(Card)`
width: 40rem;
min-height: 56rem;
padding: 3.2rem 4rem;
border-radius: 0.3rem;
box-sizing: border-box;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
text-align: center;
`;
// 引入的圖片，作為參數(shù)直接使用
import logo from "assets/logo.svg";
// 反引號可參照魔法字符串傳入?yún)?shù)
const Header = styled.header`
background: url(${logo}) no-repeat center;
padding: 5rem 0;
background-size: 8rem;
width: 100%;
`;
提取公共的css組件
1, 反引號之前，接收泛型的參數(shù), 可能用到的參數(shù)都要列出來
2, 取傳進(jìn)來的參數(shù)，用props來取，比如props.between, 可以用函數(shù)返回值給css屬性賦值，css屬性不渲染，返回值就是undefined
justify-content: ${(props) => (props.between ? "space-between" : undefined)};
3, 可以用css選擇器
4，調(diào)用時，跟普通js組件一樣使用，傳參也相同
// 調(diào)用Row組件
<HeaderLeft gap={1}>
//html代碼
</HeaderLeft>
const HeaderLeft = styled(Row)``;
// 定義Row組件
export const Row = styled.div<{
gap?: number | boolean;
between?: Boolean;
marginBottom?: number;
}>`
display: flex;
align-items: center;
justify-content: ${(props) => (props.between ? "space-between" : undefined)};
margin-bottom: ${(props) =>
props.marginBottom ? props.marginBottom + "px" : undefined};
> * {
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-right: ${(props) =>
typeof props.gap === "number"
? props.gap + "rem"
: props.gap
? "2rem"
: undefined};
}
`;
寫emotion行內(nèi)樣式
1，在組件的頂部寫上 下面代碼，告知當(dāng)前組件用了emotion行內(nèi)樣式
/* @jsxImportSource @emotion/react */
2，行內(nèi)樣式的格式：css={ /* 行內(nèi)樣式代碼 */ }
<Form css={{ marginBottom: "2rem" }} layout={"inline”}>
// html代碼
</Form>
以上就是emotion的介紹和使用。(#^.^#)
以上就是React使用emotion寫css代碼的詳細(xì)內(nèi)容，更多關(guān)于React用emotion寫css代碼的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React中使用async validator進(jìn)行表單驗證的實例代碼
react上進(jìn)行表單驗證是很繁瑣的，在這里使用async-validator處理起來就變的很方便了，接下來通過本文給大家介紹React中使用async validator進(jìn)行表單驗證的方法,需要的朋友可以參考下2018-08-08
React實現(xiàn)一個倒計時hook組件實戰(zhàn)示例
這篇文章主要為大家介紹了React實現(xiàn)一個倒計時hook組件，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本文以簡潔為目標(biāo)，幫助快速上手react-router-dom默認(rèn)你接觸過路由相關(guān)的開發(fā)，通過實例代碼講解的很詳細(xì)，對React路由相關(guān)知識感興趣的朋友一起看看吧2021-05-05
這篇文章主要為大家詳細(xì)介紹了React封裝全屏彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要給大家介紹了關(guān)于利用React擼一個日程組件的相關(guān)資料,包括日常組件的實現(xiàn)思路、使用的技術(shù)、以及遇到的技術(shù)難點，并給提供了詳細(xì)的實例代碼,需要的朋友可以參考下2021-07-07
使用React實現(xiàn)一個簡單的待辦事項列表的示例代碼
這篇文章我們將詳細(xì)講解如何建立一個這樣簡單的列表,文章通過代碼示例介紹的非常詳細(xì),對我們的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了React 表單與事件的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
react18?hooks自定義移動端Popup彈窗組件RcPop
這篇文章主要介紹了react18?hooks自定義移動端Popup彈窗組件RcPop,react-popup?基于react18+hook自定義多功能彈框組件,整合了msg/alert/dialog/toast及android/ios彈窗效果,需要的朋友可以參考下2023-08-08
React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了ReactJS中的自定義組件的代碼講解,需要的朋友可以參考下2019-11-11
React實現(xiàn)生成和導(dǎo)出Word文檔的方法詳解
React是一個流行的JavaScript庫,用于構(gòu)建現(xiàn)代前端應(yīng)用程序,本文將深入探討如何在React中生成和導(dǎo)出Word文檔,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09