第一步:在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. Python参数类型以及实现isOdd函数,isNum函数,multi函数,isPrime函数

    Python参数类型以及实现isOdd函数,isNum函数,multi函数,isPrime函数 一.Python参数类型 形参:定义函数时的参数变量. 实参:调用函数时使用的参数变量. 参数传递的过程 ...

  2. npm查看本地包版本号和远程包的版本号

    npm 查看远程包 第一种方法: npm info <packageName> 第二种方法: npm view <packageName> versions --json np ...

  3. Samba基础配置

    本文环境:CentOS 7 简介 在UNIX-like之间共享文件系统主要是通过NFS实现的,而Windows之间共享文件系统主要是通过基于NetBIOS的网上邻居实现的,1984年Andrew Tr ...

  4. MongoDB创建集合和删除集合05-14学习笔记

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写,是一个基于分布式文件存储的开源数据库系统.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关 ...

  5. COMP2521: Assignment

    COMP2521: Assignment 2Social Network AnalysisA notice on the class web page will be posted after eac ...

  6. 用python读写和处理csv文件

    import requestsfrom bs4 import BeautifulSoupimport csv date = open('test.csv', 'w')writer = csv.writ ...

  7. ubuntu 16.04无法连接网络;双系统无法上网;连接已断开,你现在处于断开状态

    先描述一一下我的问题,若和你的一样,请继续往下看. 我是在原有Windows7系统的台式计算机中安装了ubuntu 16.04,所以目前这台计算机是双系统.打开Windows系统时有线网络正常链接.但 ...

  8. solidity智能合约如何判断mapping值为空

    mapping值的判断问题 在Java这类编程语言中,我们可以获得Map里面的值然后与null或空来进行判断该key对应的值是否为空.可是在solidity中貌似并没有提供类似的判断.那么我们如果来进 ...

  9. C#上手练习6(方法语句1)

    方法是将完成同一功能的内容放到一起,方便书写和调用的一种方式,也体现了面向对象语言中封装的特性. 定义方法的语法形式如下. 访问修饰符    修饰符    返回值类型    方法名(参数列表){    ...

  10. Nginx反向代理实现负载均衡以及session共享

    随着社会的发展和科技水平的不断提高,互联网在人们日常生活中扮演着越来越重要的角色,同时网络安全,网络可靠性等问题日益突出.传统的单体服务架构已不能满足现代用户需求.随之而来的就是各种分布式/集群式的服 ...