模块样式

在刚开始构建好框架的时候,准备开始写业务,在第一个页面的时候就会碰到怎么引入样式的问题,踩过一些坑,不是使用style,头部也不需要另外取名,直接引入css就可以,引入方式是这样

<div className='topHead back fs14'>
<img src='/images/highLevel.png' className='levelSize'/>
</div>

使用className的形式

引入方式

import './index.css';

index.css

@import '~antd/dist/antd.css';

.topHead {
width: 100%;
height: 100px;
display: flex;
align-items: center;
}
.back{
background-image: url('/images/homeBackImg.png');
}
.levelSize{
width: 80px;
height: 80px;
}
.levelColor{
color:#ffffff;
}

行内样式

行内样式跟平常的style='margin:0px'不太一样,要这样

 <Divider style={{margin:'0px'}}/>

也是用的style,但书写方式不一样了

react里面怎么引入样式的更多相关文章

  1. 初学React:组件的样式

    React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

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

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

  4. HTML&CSS基础学习笔记1.12—引入样式表

    引入样式表 我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...

  5. CSS(三):引入样式和优先级

    CSS的引入样式总共有三种:行内样式(内联样式表).内部样式表.外部样式表.下面分别来介绍这三种样式. 一.行内样式 行内样式也叫内联样式,使用style属性引入CSS样式.看下面的示例: <! ...

  6. CSS学习摘要-引入样式

    CSS学习摘要-引入样式 注:主要是摘录自MDN 网络开发者这个网站的. CSS 实际上如何工作? 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML和 ...

  7. CSS之引入样式

    CSS引入样式 内部样式 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head> <style type=&quo ...

  8. react中内联样式的z-index不起作用.

    <div style={{z-index: -100}} > hello,money. </div> 以上z-index样式如上写法是不起作用,原因是在react中内联样式的写 ...

  9. css样式中@import引入样式

    css样式中@import引入样式 学习了:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html

随机推荐

  1. Photoshop入门教程(五):滤镜

    学习心得:滤镜通常用于摄影行业,是安装在相机镜头前用于过滤自然光的附加镜头,从而获得一些特殊的效果.同理,Photoshop的滤镜也是为了产生特殊的效果.Photoshop滤镜分为两类:一种是内部滤镜 ...

  2. python搭配selenium,htmltestrunner实现自动化测试 —— (测试思路和基础步骤)

    1. 测试思路: 编写测试单例 编写测试套件,集合测试单例 集中测试测试套件 生成测试报告 补充,发送测试结果到E-mail 2. 示例 编写测试单例 编写测试套件 测试脚本程序 生成报告 发送邮件 ...

  3. perf命令

    @(Linux基础)[perf命令] perf命令 ---- 简介 Perf是内置于Linux内核源码树中的性能剖析(profiling)工具,它基于事件采样原理,以性能事件为基础,支持针对处理器相关 ...

  4. vue axios 跨域

    qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 1. qs.parse()将URL解析成对象的形式 2. qs.stringify()将对象 序列化成URL的形式,以 ...

  5. shell查看内存

    <1>jps<2>ps<3>free<4>df<5>top jps: 很多Java命令都在jdk的JAVA_HOME/bin/目录下面,jp ...

  6. 多线程编程_读写锁ReadWriteLock

    Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互斥的效果,它们必须用同一个Lock对象. 读写锁:分为读 ...

  7. python spilt()函数的使用方法

    Python中的split()函数的用法 Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后 ...

  8. Spring Boot使用mongo的GridFS模块

    1. GridFS简介 GridFS是Mongo的一个子模块,使用GridFS可以基于MongoDB来持久存储文件.并且支持分布式应用(文件分布存储和读取).作为MongoDB中二进制数据存储在数据库 ...

  9. schema中属性声明

    <attribute name="属性名"   default="默认值"  fixed="固定值" use="option ...

  10. 树莓派WLAN连接PC(不通过路由器)

    上一篇博文捣鼓了一下树莓派直连线连接PC.吃完午饭心血来潮,树莓派既然能用直连线连接PC,曾经也试过拿PC当作热点,为何不尝试一下用WLAN将树莓派与PC互连呢?果断搞起. 首先,我当前笔记本是用WL ...