模块样式

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

    Given an nonnegative integer array, find a subarray where the sum of numbers is k. Your code should ...

  2. my.副本

    梦幻西游手游 天蓬下凡 副本 第三关:天蓬终于决定要告白了,主怪大唐,护卫狮驼岭,帮凶是龙宫,打过这关也很简单. 第四关:康太尉找来了天兵,怪仍然是有法有攻,但是打起来也是不难. ZC: 姚太尉是物理 ...

  3. RTT之POSIX

    POSIX:可移植操作系统接口,是一个标准. 创建线程:如果线程创建成功,线程立刻进入就绪态,参与系统的调度,如果线程创建失败,则会释放之前线程占有的资源int pthread_create (pth ...

  4. maya卸载不干净

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  5. windows 7下安装tomcat6 web服务器

    因为项目中要使用Mondrian提供ROLAP应用,而Mondrian是运行在tomcat上的. 一. 软件获取: http://tomcat.apache.org/ 二. 安装步骤: 运行可执行程序 ...

  6. Elasticsearch简单运算

    求平均数 { "query": { "bool": { "must": [ { "term": { "stor ...

  7. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

  8. 搭建mysql集群,使用Percona XtraDB Cluster搭建

    Percona XtraDB Cluster提供的特性有:1.同步复制,事务要么在所有节点提交或不提交.2.多主复制,可以在任意节点进行写操作.3.在从服务器上并行应用事件,真正意义上的并行复制.4. ...

  9. ZK典型应用场景

    1. 数据发布/订阅--动态获取数据 2.Master选举 a). 利用Zk会保证无法重复创建一个已经存在的节点 b). 多个客户端同时创建,创建成功的即是master,并监控master节点,一旦m ...

  10. SQL——行转列,列转行

    行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通过CASE WHEN 语句来实现,也可以通过 SQL SERVER 2005 新增的运算符PIVOT来实现.用传统的方法,比较好理解.层次清 ...