react里面怎么引入样式
模块样式
在刚开始构建好框架的时候,准备开始写业务,在第一个页面的时候就会碰到怎么引入样式的问题,踩过一些坑,不是使用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里面怎么引入样式的更多相关文章
- 初学React:组件的样式
React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- React中引用CSS样式的方法
相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...
- 聊一聊 React 中的 CSS 样式方案
和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...
- HTML&CSS基础学习笔记1.12—引入样式表
引入样式表 我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. < ...
- CSS(三):引入样式和优先级
CSS的引入样式总共有三种:行内样式(内联样式表).内部样式表.外部样式表.下面分别来介绍这三种样式. 一.行内样式 行内样式也叫内联样式,使用style属性引入CSS样式.看下面的示例: <! ...
- CSS学习摘要-引入样式
CSS学习摘要-引入样式 注:主要是摘录自MDN 网络开发者这个网站的. CSS 实际上如何工作? 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML和 ...
- CSS之引入样式
CSS引入样式 内部样式 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head> <style type=&quo ...
- react中内联样式的z-index不起作用.
<div style={{z-index: -100}} > hello,money. </div> 以上z-index样式如上写法是不起作用,原因是在react中内联样式的写 ...
- css样式中@import引入样式
css样式中@import引入样式 学习了:http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html
随机推荐
- 基于python检测端口是否在使用
开发中,需要开启Modbus Slave服务,但是,modbus_tk 并没有提供一个端口检测的方法,导致 modbus_tcp.TcpServer(port=502) 时候会提示端口被占用 于是需要 ...
- js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
- CESM部署安装环境和使用
平台信息 Description: CentOS Linux release 7.6.1810 (Core) 安装CESM 安装前提:(小提示:耗时较长,需要耐心)阅读原文 CentOS 7(检查:s ...
- OpenStack Weekly Rank 2015.08.03
Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 7 1 1 7 11 Sw ...
- HDU 2819 ——Swap——————【最大匹配、利用linker数组、邻接表方式】
Swap Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...
- C# .NET中自带的委托Actoin、Func详解
委托是.NET中强大的功能,而.NET为我们提供了2个非常实用的泛型委托,分别是Action.Func [Action] Action是.NET内部提供的一个无返回值.泛型的委托,有16重载,分别是0 ...
- SQL Server和ASP.NET的操作基本操作
ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlCommand对象,负责SQL语句的执行和存储过程的调用: 第三 ...
- [Java][Liferay] 模拟用户
以admin的帐号登陆 Navigation to Users and Organizations -> All Users 找到你要查看的user,点击Actions->Imperson ...
- angular的多个模块执行 angular里 字符串与对象的互转
1.disable : true ,禁用 2.$timeout 计时器 $interval.cancel(timer); 3.app.run(); 可以不使用控制器就开启数据,但适合$rootsco ...
- 跨平台图表控件TeeChart使用教程:导入XML数据
TeeChart的最新版中包含了一个自动加载XML数据的新组件.这个组件的名字叫做TTeeXMLSource,用户可以在TeeXML.pas unit中找到这个组件. 加载XML图表所需的最小属性是& ...