相对于html中引用css的三种方法,react中也有三种方法,一一相对:

1. 行内样式:直接在组件内部定义

<div style={{width:'20px',height:'30px'}}>
First Way!
</div>

2. 声明样式:在render函数中先声明,再引用

render() {
let mystyle = {
width:'20px',
height:'30px'
} return(
<div style={mystyle}>
Second Way!
</div>
);
}

3. 引入样式:引入外部的css文件,外部的css文件就是普通的css,在组件js中的import语句后面使用如下语句。

requre('./mystyle.css');

React中引用CSS样式的方法的更多相关文章

  1. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  2. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  3. HTML文档中应用css样式的方法总结

    在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...

  4. 聊一聊 React 中的 CSS 样式方案

    和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...

  5. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  6. JSP中引用CSS样式文件却无法显示的问题解决方案

    你也遇到过这种问题吗,CSS写好了,JSP写好了,在JSP中调用CSS文件,路径检查后也正确,但是无法显示渲染后的页面 原因:罪魁祸首就是过滤器响应数据的时候,响应头设置为了“text/html”,但 ...

  7. 在html页面引用css文件的方法

    引用CSS文件到Html方法-css引入,css引用 使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用css方法如 ...

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

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

  9. html导入css样式的方法

    在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p style="width:100px;height:40px;color:red;"></ ...

随机推荐

  1. 关于js的for in循环,慎用

    参考:http://www.cftea.com/c/2014/08/6290.asp作者:vkvi 如题我看到也有点诧异,测试了真的有这个问题,上代码 Array.prototype.a = func ...

  2. 前端开发规范:3-CSS

    尽量使用缩写属性 border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height ...

  3. springmvc+mybatis需要的jar包与详解

    https://www.cnblogs.com/luohengstudy/p/7772109.html

  4. Django回顾--配置文件

    """ Django settings for meiduo_mall project. Generated by 'django-admin startproject' ...

  5. CentOS7升级OpenSSL版本

    1.CentOS7.6默认安装的openssl版本为 # 查看openssl版本 openssl version 2.下载最新的openssl wget https://www.openssl.org ...

  6. 工作笔记 之 Linux服务搭建

    No.1 linux环境下安装nginx步骤 Nginx (engine x) 是一款轻量级的Web 服务器.反向代理服务器.电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行. ...

  7. maven修改运行环境配置

    maven中自带的tomcat是6版本,比如我们想用tomcat7,jdk1.8,我们就要通过配置来改变. 改变方式如下 <build> <plugins> <plugi ...

  8. Spring Boot 2 快速教程:WebFlux 集成 Thymeleaf(五)

    号外:为读者持续整理了几份最新教程,覆盖了 Spring Boot.Spring Cloud.微服务架构等PDF.获取方式:关注右侧公众号"泥瓦匠BYSocket",来领取吧! 摘 ...

  9. 干货:.net core实现读取appsettings.json配置文件(建议收藏)

    看好多人不懂在.NET CORE中如何读取配置文件,我这里分两篇,这一篇介绍怎样通过appsettings.json配置读取文件信息.这里我会教大家两种方式: 第一种直接放到通用类库,那里想调往那调. ...

  10. python爬虫网页解析之lxml模块

    08.06自我总结 python爬虫网页解析之lxml模块 一.模块的安装 windows系统下的安装: 方法一:pip3 install lxml 方法二:下载对应系统版本的wheel文件:http ...