模块样式

在刚开始构建好框架的时候,准备开始写业务,在第一个页面的时候就会碰到怎么引入样式的问题,踩过一些坑,不是使用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. POI 读大文件日志

    POI的三个目录 usermodel 包含很多类,方便用户使用,但是占用内存大 eventusermodel 使用xml的SAX事件解析,XSSFReader创建时必须使用OPCPackage,pkg ...

  2. java——保存书店每日交易记录程序设计

    Books.java: 这个文件定义了一个Books类. 规定Books类拥有的属性:int id, String name, String publish, double price, int nu ...

  3. 转 Relinking Causes Many Warning on AIX

    SYMPTOMS Relink returns many warnings Running make for target ioracle OPatch found the word "er ...

  4. c++ 封装线程库 1

    1.Pthread条件变量简介 条件变量也是线程间同步一个重要的内容,如果说互斥是一个种竞争关系,那么条件变量用于协调线程之间的关系,是一种合作关系. 条件变量的应用很多,例如:BlockingQue ...

  5. checkbox多选、全选js效果

    //全选checkbox function allCheck() { //全选input var all = $("input[name='all']"); //全部的input ...

  6. python3+Appium自动化12-H5元素定位环境搭建

    前言 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原生控件进行元素 ...

  7. Python3实现计算BMI指数,跟我一起来计算你的BMI吧

    废话不多说,直接上程序哈: name=input('Name:') height=input('Height(m):') weight=input('Weight(kg):') BMI=float(f ...

  8. DedeCms中Channel用typeid无效

    DedeCms中channel 用typeid调用无法达目的吗?请换成type试试! {dede:channel type='son' typeid='19' row='1'} <a href= ...

  9. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

  10. Ibatis.net 1.6.2 简单配置及Log4.Net日志记录

    看似简单的Ibatis配置起来注意的地方还挺多.里面的设置及功能还算强大.昨晚配置了半宿,结果一运行还是各种错误.急的直冒汗.果断下载实例去研究.英文不好文档只能作为功能参考. 下面一步步进入Ibat ...