React使用emotion写css代码

简介：

emotion是一个JavaScript库，使用emotion可以用写js的方式写css代码。在react中安装emotion后，可以很方便进行css的封装，复用。使用emotion后，浏览器渲染出来的标签是会加上一个css开头的标识。如下：截图中以css-开头的几个标签，就是使用emotion库后渲染出来的。

下面就从安装到使用，介绍下emotion在工程中的应用。

emotion的安装：

yarn add @emotion/react
yarn add @emotion/styled

新增普通css组件：

1，命名和组件一样，大写字母开头
2，styled后面跟html标签

// 引入emotion
import styled from "@emotion/styled”;
// 使用emotion 创建css组件
const Container = styled.div`
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
`;
//在html代码中使用css组件：
<Container>
// html代码
</Container>

给已存在组件加样式：

1，变量名首字符大写
2，将已经存在的组件作为参数传入styled
3，样式代码可以加参数

// 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.header`
background: url(${logo}) no-repeat center;
padding: 5rem 0;
background-size: 8rem;
width: 100%;
`;

提取公共的css组件

1, 反引号之前，接收泛型的参数, 可能用到的参数都要列出来
2, 取传进来的参数，用props来取，比如props.between, 可以用函数返回值给css属性赋值，css属性不渲染，返回值就是undefined

justify-content: ${(props) => (props.between ? "space-between" : undefined)};

3, 可以用css选择器
4，调用时，跟普通js组件一样使用，传参也相同

// 调用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行内样式

1，在组件的顶部写上 下面代码，告知当前组件用了emotion行内样式

/* @jsxImportSource @emotion/react */

2，行内样式的格式：css={ /* 行内样式代码 */ }

<Form css={{ marginBottom: "2rem" }} layout={"inline”}>
// html代码
</Form>

以上就是emotion的介绍和使用。(#^.^#)

以上就是React使用emotion写css代码的详细内容，更多关于React用emotion写css代码的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 基于react项目打包css引用路径错误解决方案

    没有去修改create-react-app默认的配置文件 执行npm start 一切正常, 但是 npm run build 之后生成的打包文件只能在根目录访问 这样放在服务器目录就访问不到了 报错为 手动更改index.html的路径之后又报静态资源引入错误 报错 解决方案 解决: 在package.json下面增加"homepage": ".". 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 详解react的两种动态改变css样式的方法

    第一种:动态添加class,以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; import './style.css'; class Demo extends Component{ constructor(props) { super(props); this.state = { display: true } this.handleshow = this.handleshow.bind(this) thi

  • 详解使用create-react-app添加css modules、sasss和antd

    create-react-app 是facebook的官方脚手架,对于个人开发者和中小型公司快速创建项目非常推荐.react的CSS解决方案有很多,这里我技术选型时用 css modules 和 sass ,然后配合antd使用通用组件库.但是create-react-app原生并不支持 css modules 和 sass ,所以需要额外配置. 配置 增加css modules和sass 使用eject暴露配置 create-react-app 默认是没有暴露 webpack 配置的,所以需要

  • react中使用css的7中方式(最全总结)

    第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 minHeight: "200px", boxSizing: &

  • 如何用react优雅的书写CSS

    如何用react优雅的书写CSS

    1.内联样式 优点:这种方式较为简单,一目了然,给标签添加style属性. 缺点: 这种方式可以造成项目结构较为臃肿,造成css命名冲突. import React, { Component } from 'react' import PropTypes from 'prop-types' export default class index extends Component { static propTypes = { title: PropTypes.string } render() {

  • 在create-react-app中使用css modules的示例代码

    前言 如果我们从零开始用webpack + es6来结合react开发前端应用,那势必会在各种webpack配置中消耗大量精力,于是便有了各种脚手架,create-react-app就是其中之一. 对于css modules,在react中,通常用它来避免预料之外样式规则相互覆盖以及实现其他功能. 配置弹出配置文件 如果直接使用create-react-app搭建一个项目,所有的配置文件都被隐藏了,整个目录就先这样 所以,第一步是将所有的配置文件弹出,在根目录运行以下代码 npm run eje

  • react使用CSS实现react动画功能示例

    本文实例讲述了react使用CSS实现react动画功能.分享给大家供大家参考,具体如下: react动画: import React, { Component } from 'react'; class Boss extends Component { constructor(props) { super(props); this.state = { isShow:true } this.toTogger=this.toTogger.bind(this) } render() { return

  • ReactJs设置css样式的方法

    ReactJs设置css样式的方法

    前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧. React颠覆了html的传统思维,代码基本都写在<script  type="text/babel"></script>标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在set

  • 在Create React App中使用CSS Modules的方法示例

    前提条件 请先进行全局安装 create-react-app 插件哈,安装命令:npm install create-react-app -g 先使用 create-react-app 命令下载一个脚手架工程,安装命令: # 使用 npx $ npx create-react-app my-app # 使用 npm $ npm init npx create-react-app my-app # 使用 yarn $ yarn create react-app my-app 运行项目 $ cd m

  • React使用emotion写css代码

    React使用emotion写css代码

    简介: emotion是一个JavaScript库,使用emotion可以用写js的方式写css代码.在react中安装emotion后,可以很方便进行css的封装,复用.使用emotion后,浏览器渲染出来的标签是会加上一个css开头的标识.如下:截图中以css-开头的几个标签,就是使用emotion库后渲染出来的. 下面就从安装到使用,介绍下emotion在工程中的应用. emotion的安装: yarn add @emotion/react yarn add @emotion/styled

  • CSS代码检查工具stylelint的使用方法详解

    CSS代码检查工具stylelint的使用方法详解

    CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑. CSS 是以描述为主的样式表,如果描述得混乱.没有规则,对于其他开发者一定是一个定时炸弹,特别是有强迫症的人群.CSS 看似简单,想要写出漂亮的 CSS 还是相当困难.所以校验 CSS 规则的行动迫在眉睫.stylelint是一个强大的现代 CSS 检测器,可以让开发者在样式表中遵循一致的约定和避免错误.本文将详细介绍CSS代码检查工具stylelint 概述 stylelint拥有超过150条的规则,包括捕捉错误.最佳实践.控制可

  • Zen Coding 快速编写HTML/CSS代码的实现

    Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码. 在JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用.JavaScript框架应运而生,它们同时引入了CSS选择器引擎.

  • javascript 动态生成css代码的两种方法

    javascript 动态生成css代码的两种方法 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中.但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决.还需要注意的就是在有些版本IE中一个页面上style

  • vue 使用Jade模板写html,stylus写css的方法

    日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的步骤和提高了效率. 安装包 // 安装jade包 npm install jade jade-loader --save-dev // 如果使用vue-cli构建项目,则不需要安装stylus相关的包,vue-cli默认已安装 npm install stylus stylus-loader --save-dev 配置文件 // webpack.base.

  • React Hooks之usePolymerAction抽象代码结构设计理念

    React Hooks之usePolymerAction抽象代码结构设计理念

    目录 背景 设计理念 抽象代码结构 声明与定义 用法 高级用法 拆分/合并action API useSetState getAction polymerAction usePolymerActionState mergePolymerAction 背景 随着React Hooks 普及起来,组件逻辑写法变成函数式:逻辑函数声明.函数代码结构,随着逻辑增加复杂,代码组织混乱,函数声明散乱: 最关键的一点,每个人对代码理解不一样,有的喜欢在一个function 写大段逻辑,有的喜欢拆分逻辑很细,

  • 异步加载JS、CSS代码（推荐）

    我的风格你懂得,具体详情介绍如下 关键代码如下所示: function AsyncLoad(V_tag,V_src) { if (V_tag == "script") { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = V_src; var x = document.getElementsByTagName('script')[0]; x.pare

  • 用于CSS代码压缩与格式化的javascript函数代码

    复制代码 代码如下: var lCSSCoder={ format : function(s){//格式化代码 s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1"); s=s.replace(/\,[\s\.\#\d]*{/g,"{"); s=s.replace(/([^\s])\{([^\s])/g,"$1 {\n\t$2"); s=s.replace(/([^\s])\}([^\n]*)/g,"$1\n

  • javascript中直接写php代码的方法

    一.在javascript中嵌入php代码javascript若是通过js文件包含进来的,那么js文件中也可以直接写php代码,只不过包含js文件是扩展名要改成php,如: 复制代码 代码如下: <script herf="js/demo.js.php"></script> 二.javascript函数参数的默认值c语言中可以通过这样来设置默认参数: 复制代码 代码如下: void foo(int a, int b = 1, bool c = false); 但

  • Javascript实现的CSS代码高亮显示

    相比JavaScript,CSS的语法就简单多了,主要是处理注释.字符串.CSS样式名称.CSS样式值.缩进和换行,具体详情请看代码. Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.

随机推荐