第一步:在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. 史上最详细配置HTTPS

    HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准.设计HTTP的初衷是为 ...

  2. 使用vmware workstation安装centos 7操作系统

    安装步骤 1.点击创建虚拟机,进入新建虚拟机向导,选择自定义,典型:相当于去电脑 旗舰店里店员推荐的是一样,推荐的比一定好,自定义:是手动操作的,没有linux基础最好选择自定义.点击下一步. 2.虚 ...

  3. HTML5新属性在Google浏览器中不能显示的问题

    这两天在学习HTML5新属性时遇到了如下问题,很是不解: 例如在学习使用canvas时,需要绘制一个红色的原点,代码如下: <!DOCTYPE HTML> <html> < ...

  4. 描述符(__get__和__set__和__delete__)

    目录 一.描述符 二.描述符的作用 2.1 何时,何地,会触发这三个方法的执行 三.两种描述符 3.1 数据描述符 3.2 非数据描述符 四.描述符注意事项 五.使用描述符 5.1 牛刀小试 5.2 ...

  5. Golang 入门 : channel(通道)

    笔者在<Golang 入门 : 竞争条件>一文中介绍了 Golang 并发编程中需要面对的竞争条件.本文我们就介绍如何使用 Golang 提供的 channel(通道) 消除竞争条件. C ...

  6. pytorch固定部分参数

    pytorch固定部分参数 不用梯度 如果是Variable,则可以初始化时指定 j = Variable(torch.randn(5,5), requires_grad=True) 但是如果是m = ...

  7. 【STM32H7教程】第20章 STM32H7的GPIO应用之无源蜂鸣器

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第20章       STM32H7的GPIO应用之无源蜂鸣器 ...

  8. 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 3

    18.3  PDO的安装 PDO随PHP 5.1版本发行,在PHP 5的PECL扩展中也可以使用.PDO需要PHP 5版本核心面向对象特性的支持,所以它无法在之前的PHP版本中运行.无论如何,在配置P ...

  9. pytest框架之fixture前置和后置

    一.conftest.py 定义公共的fixture,多个测试类中都可以调用 pytest提供了conftest.py文件,可以将fixture定义在此文件中 运行测试用例时,不需要去导入这个文件,会 ...

  10. wcharczuk/go-chart图表上使用中文字体

    https://github.com/wcharczuk/go-chart/ 默认使用的字体是 roboto.Roboto,不支持中文.  // GetDefaultFont returns the ...