天津企业如何建网站,团购机票网站建设,群晖wordpress建站教程,深圳市手机网站建设报价简介#xff1a;emotion是一个JavaScript库#xff0c;使用emotion可以用写js的方式写css代码。在react中安装emotion后#xff0c;可以很方便进行css的封装#xff0c;复用。使用emotion后#xff0c;浏览器渲染出来的标签是会加上一个css开头的标识。如下#xff1a;截…简介emotion是一个JavaScript库使用emotion可以用写js的方式写css代码。在react中安装emotion后可以很方便进行css的封装复用。使用emotion后浏览器渲染出来的标签是会加上一个css开头的标识。如下截图中以css-开头的几个标签就是使用emotion库后渲染出来的。下面就从安装到使用介绍下emotion在工程中的应用。emotion的安装yarn add emotion/reactyarn add emotion/styled新增普通css组件1命名和组件一样大写字母开头2styled后面跟html标签// 引入emotionimport styled from emotion/styled”;// 使用emotion 创建css组件const Container styled.divdisplay: flex;flex-direction: column;align-items: center;min-height: 100vh;;//在html代码中使用css组件// html代码给已存在组件加样式1变量名首字符大写2将已经存在的组件作为参数传入styled3样式代码可以加参数// 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;;// 引入的图片作为参数直接使用import logo from assets/logo.svg;// 反引号可参照魔法字符串传入参数const Header styled.headerbackground: url(${logo}) no-repeat center;padding: 5rem 0;background-size: 8rem;width: 100%;;提取公共的css组件1, 反引号之前接收泛型的参数, 可能用到的参数都要列出来2, 取传进来的参数用props来取比如props.between, 可以用函数返回值给css属性赋值css属性不渲染返回值就是undefinedjustify-content: ${(props) (props.between ? space-between : undefined)};3, 可以用css选择器4调用时跟普通js组件一样使用传参也相同// 调用Row组件//html代码const HeaderLeft styled(Row);// 定义Row组件export const Row styled.divgap?: 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行内样式1在组件的顶部写上 下面代码告知当前组件用了emotion行内样式/* jsxImportSource emotion/react */2行内样式的格式css{ /* 行内样式代码 */ }// html代码以上就是emotion的介绍和使用。(#^.^#)
