模块样式

在刚开始构建好框架的时候,准备开始写业务,在第一个页面的时候就会碰到怎么引入样式的问题,踩过一些坑,不是使用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. python 格式化时间含中文报错: 'locale' codec can't encode character '\u5e74'

    执行下面代码报错: UnicodeEncodeError: 'locale' codec can't encode character '\u5e74' in position 2: Illegal ...

  2. acm之奇葩数据输入专题

    1.每組测试数据都在一行,不知道每组测试数据的长度,以换行为测试数据输入的结束 关键代码:if (cin.get() == '\n')   {语句} 例如:找出每组测试的最大值: 输入: 3 1 4 ...

  3. SElinux学习记录

    1.SELinux:是一种基于域类型模型的强制访问控制安全系统,由NSA编写设计成内核模块包含到内核中,相应的某些安全相关的应用也被打了SE Linux补丁 查看Selinux: ps -Z #查看S ...

  4. thinkPHP 模板操作

    1.assign赋值 $this->assign('title','模板操作'); $this->assign('bests',$bests);//$bests是二维数组 2.变量的输出 ...

  5. UGUI ScrollRect 各参数的代码引用以及作用

  6. 性能测试工具LoadRunner20-LR之Controller Service-Level Agreement(服务水平协议)

    SLA是为负载测试场景定义的具体目标.例如,评测脚本中任意数量事务的平均响应时间,可以定义具体的目标或阈值.测试运行结束之后,LR将你定义的目标与实际录制的平均事务响应时间进行比较.如果实际的平均事务 ...

  7. 性能测试工具Jmeter10-Jmeter集合点与关联

    集合点 操作步骤: 注意:集合点要放在需要集合的元件前面 关联 正则表达式提取器 配置说明 引用名称:下一个请求要引用的参数名称,如token,则可用${token}引用它 正则表达式: () 括起来 ...

  8. 牛客网Java刷题知识点之字符流缓冲区、BufferedWriter、BufferedReader、BufferedReader-readLine方法原理、自定义MyBufferedReader-read方法、自定义MyBufferedReader-readLine方法

    不多说,直接上干货! 把提高效率的动作,封装成一个对象.即把缓冲区封装成一个对象. 就是在一个类里封装一个数组,能对流锁操作数据进行缓存. 什么是字符流缓冲区? 善于使用字符流缓冲区,减轻负担,提高下 ...

  9. 020-pom.xml配置文件模板

    1 Maven 整合SSH框架之pom.xml 1 版本一 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns: ...

  10. 批量处理标签属性中document.getElementsByName()的替代方案

    背景 今天在逛知乎时候,看到一个JavaScript方面的问题: 最近在学习JavaScript DOM,就好奇地查阅资料,以及请教学长,得到下面解答: http://www.w3help.org/z ...