第一步:在page或者pages目录下新建一个css文件,例如style.css;

第二步:在jsx页面中import该css文件,例如:

import style from './style.css';

第三步:在你需要修饰的component里面添加className属性,例如:

className={style.sty1}

第四步:在css文件中定义该className属性,例如:

sty1{color:red}

JSX中引用CSS的一种方法的更多相关文章

  1. HTML中引用CSS的几种方法

    HTML中引用CSS的方法主要有 行内样式 内嵌式 链接式 导入样式 行内样式 指写在标签里的Style元素的值 <p style="color: #FF0000;"> ...

  2. html中插入css的4种方法

    #1:链入外部样式表 <head> <link href="mystyle.css" rel="stylesheet" type=" ...

  3. 在Visual Studio 2015中引用DLL的3种方法

    1.把dll文件复制到可执行文件所在目录 2.将工程属性->配置属性->调试->工作目录更改为dll文件所在目录 3.将工程属性->配置属性->调试->环境设置为P ...

  4. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

  5. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  6. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  7. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

  8. 在ASP.NET Core中构建路由的5种方法

    原文链接 :https://stormpath.com/blog/routing-in-asp-net-core 在ASP.NET Core中构建路由的5种方法 原文链接 :https://storm ...

  9. C#调用接口注意要点 socket,模拟服务器、客户端通信 在ASP.NET Core中构建路由的5种方法

    C#调用接口注意要点   在用C#调用接口的时候,遇到需要通过调用登录接口才能调用其他的接口,因为在其他的接口需要在登录的状态下保存Cookie值才能有权限调用, 所以首先需要通过调用登录接口来保存c ...

随机推荐

  1. Leetcode450. 删除二叉搜索树中的节点

    思路: (1)如果root为空,返回 (2)如果当前结点root是待删除结点: a:root是叶子结点,直接删去即可 b:root左子树不为空,则找到左子树的最大值,即前驱结点,使用前驱结点代替待删除 ...

  2. Python进阶小结

    目录 一.异常TODO 二.深浅拷贝 2.1 拷贝 2.2 浅拷贝 2.3 深拷贝 三.数据类型内置方法 3.1 数字类型内置方法 3.1.1 整型 3.1.2 浮点型 3.2 字符串类型内置方法 3 ...

  3. golang数据结构之冒泡排序

    //BubbleSort 冒泡排序 func BubbleSort(arr *[]int) { ; i >= ; i-- { ; j-- { if (*arr)[j] > (*arr)[i ...

  4. 实用小工具:VNC的安装

    安装xen时,需要使用vnc工具来进行图形化安装,安装好后启动失败,试了很多办法,最终解决. 1.使用yum安装:yum install tigervnc-server tigervnc-server ...

  5. 【maven】【idea】使用idea的maven进行deploy操作失败,报错:Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:2.7:deploy (default-deploy) on project proengine-db-sdk: Failed to deploy artifacts 错误码401

    使用idea的maven进行deploy操作失败,报错: Failed to execute goal org.apache.maven.plugins:maven-deploy-plugin:- f ...

  6. solr集群Server refused connection at: http://127.0.0.1:6060/solr/ego 注册zookeepr自动使用内网ip

    引导:适用于各种注册服务,zookeeper和被注册的服务器不在同一ip上,产生的注册了127.0.0.1本地ip地址 在使用solr集群操作的时候,报了如下的错误 org.apache.solr.c ...

  7. 数据库之MySQL查询

    查询 创建数据库.数据表 -- 创建数据库 create database python_test1 charset=utf8; -- 使用数据库 use python_test1; -- stude ...

  8. HTTP Error 500.35 - ANCM Multiple In-Process Applications in same Process

    vs2019   win10 情况:报错 HTTP Error 500.35 - ANCM Multiple In-Process Applications in same Process 微软官方解 ...

  9. js键盘事件以及键盘事件拦截

    一.键盘事件 onkeydown: 按下键盘时触发 onkeypress: 按下有值的键时触发 注意: onkeypress按下 Ctrl.Alt.Shift.Meta 这样无值的键,这个事件不会触发 ...

  10. 1.springMVC Controller配置方式

    一.手动配置方式 1.web.xml中DispatcherServlet控制器的的配置 SpringMVC也是一种基于请求驱动的WEB框架,并且使用了前端控制器的设计模式.前端控制器就是Dispatc ...