第一步:在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. 用vbs和ADSI管理Windows账户

    ADSI (Active Directory Services Interface)是Microsoft新推出的一项技术,它统一了许多底层服务的编程接口,程序员可以使用一致的对象技术来访问这些底层服务 ...

  2. Java连载49-常量格式、package包介绍

    一.常量 1.常量的定义:final修饰的实例变量是不可变的,这种变量一般和static联合使用,被称为“常量” 2.常量的语法格式: public static final 类型 常量名 = 值: ...

  3. Java连载47-多态基础语法、作用

    一.多态的语法 1.两个类之间没有继承关系的,使用多态是不能编译的. 2.无论向上还是向上转型,都需要有继承关系. 3.什么时候需要向下转型? 当调用的方法或者属性是子类型特有的,在父类型中不存在,就 ...

  4. HTML连载42-清空默认边距、文字行高

    一.            webstorm取色技巧:webstorm内置了颜色取色器,我们对某种颜色未知的时候,可以利用下图中的取色器,进行颜色识别. 二.系统会默认给body添加外边距,因此我们对 ...

  5. 简单的Python GUI界面框架

    Python开发GUI界面, 可以使用pyQT或者wxpython. 不过不论pyQT还是wxpython都需要比较多的学习成本.Python工程往往是用于快速开发的,有些时候引入pyQT,wxpyt ...

  6. javascript 模块化 (切记:学习思想)

    模块化(切记:学习思想) 如果不用模块化编写代码,那么会具有以下问题: 代码杂乱无章,没有条理性,不便于维护,不便于复用 很多代码重复.逻辑重复 全局变量污染 不方便保护私有数据(闭包) 模块化的基本 ...

  7. C++入门到理解阶段二基础篇(6)——C++数组

    概述 C++ 支持数组数据结构,它可以存储一个固定大小的相同类型元素的顺序集合.数组是用来存储一系列数据,但它往往被认为是一系列相同类型的变量. 数组的声明并不是声明一个个单独的变量,比如 numbe ...

  8. SSM框架之Mybatis(4)SqlMapConfig

    Mybatis(4)SqlMapConfig.xml SqlMapConfig.xml 中配置的内容和顺序 -properties (属性) --property -settings(全局配置参数) ...

  9. windows linux 子系统及windows terminal的使用。

    windows linux 子系统及windows terminal的使用. windows linux (wsl) 其实windows早就为我们准备好了子系统,但是我们的应用商店经常挂掉.因此都用不 ...

  10. QML::基本属性类型

    QML基本属性类型