第一步：在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. __doc__

    目录 一.__doc__ 一.__doc__ 返回类的注释信息 class Foo: '我是描述信息' pass print(Foo.__doc__) 我是描述信息 该属性无法被继承 class Fo ...

  2. selenium元素定位方法之轴定位

    一.轴运算名称 ancestor:祖先结点(包括父结点) parent:父结点 preceding:当前元素节点标签之前的所有结点(html页面先后顺序) preceding-sibling:当前元素 ...

  3. 纯js的统计图插件-统计图

    第一次写博客,写的不到望大家见谅! 今天给大家分享一个纯js的插件(统计图),有知道的可以在下面评论一起谈论一下,刚学着的时候,我是看了好久才看懂的一个基本结构,到后来我才知道原来直接去原网站上找到复 ...

  4. 教妹学 Java：难以驾驭的多线程

    00.故事的起源 “二哥,上一篇<集合>的反响效果怎么样啊?”三妹对她提议的<教妹学 Java>专栏很关心. “这篇文章的浏览量要比第一篇<泛型>好得多.” “这是 ...

  5. Java 生态圈知识汇总

    原文地址:github.com/aalansehaiy… 前言 有人认为编程是一门技术活,要有一定的天赋,非天资聪慧者不能及也.其实不然,笔者虽是计算机专业出身,但工作年限并不长,对于技术这碗饭有一些 ...

  6. Newtonsoft.Json 序列化踩坑之 IEnumerable

    Newtonsoft.Json 序列化踩坑之 IEnumerable Intro Newtonsoft.Json 是 .NET 下最受欢迎 JSON 操作库,使用起来也是非常方便,有时候也可能会不小心 ...

  7. go-控制语句

    if else else不能换行 if后最好不加小括号,当然可以加,但建议不加 求平方根 引入math包 调用math.Sqrt(num)函数 switch分支 不用加break来跳出,每一个case ...

  8. java基础(20):Map、可变参数、Collections

    1. Map接口 1.1 Map接口概述 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同,如下图. Collection中的集合,元素是孤 ...

  9. element-admin中echarts图标宽度无法修改

    默认示例 <template> <div> <el-row :gutter="0"> <el-col :xs="24" ...

  10. Python笔记：设计模式之命令模式

    命令模式,正如模式的名字一样,该模式中的不同操作都可以当做不同的命令来执行,可以使用队列来执行一系列的命令,也可以单独执行某个命令.该模式重点是将不同的操作封装为不同的命令对象,将操作的调用者与执行者 ...