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
随机推荐
- java不可见字符 trim
trim()的作用去掉前后的空格, 但是解析excel,出现一个字符串trim之后还是有”空格“ 做了一下实验,原来一些不可见的字符不一定是“空格”, trim()也去不掉, 只能自己写方法了
- 懒汉式单例要加volatile吗
private static volatile Something instance = null; public static Something getInstance() { if (insta ...
- aerospike(1)-centos7安装aerospike
要安装的软件:server和tools 下载地址:https://www.aerospike.com/download/server/4.5.1.5/ server: 1.下载 wget https: ...
- Java学习笔记day06_自定义类_ArrayList
1.自定义类class 使用类的形式, 对现实中的事物进行描述. 类是引用数据类型. 事物: 方法,变量. 方法:事物具备的功能. 变量:事物的属性. 格式: public class 类名{ //属 ...
- Eclipse中项目报Target runtime com.genuitec.runtime.generic.jee60 is not defined异常的解决
参考 http://843977358.iteye.com/blog/2295344
- 为什么我用gets不行呢?系统无视了我的存在!!!
梗概:为什么我用gets不行呢?系统无视了我的存在!!!我还没输入东东啊..怎么就提示[请安任意键继续]的?? 原来是缓冲区的问题啊? 一.什么是缓冲区 缓冲区又称为缓存,它是内存空间的一部分.也就是 ...
- [转]jQuery Mobile: Get data passed to page via changePage mobile.changePage
本文转自:http://stackoverflow.com/questions/15840611/jquery-mobile-get-data-passed-to-page-via-changepag ...
- SSM项目spring配置文件详细步骤(分门别类、灵巧记忆)
spring-dao.xml文件 1.配置外部db.property文件: <context:property-placeholder location="classpath:jdbc ...
- log4j.properties 日志分析
# 多目的地.自定义样式#设置级别和多个目的地#level 是日志记录的优先级,分为 OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL或者您定义的级别.#Log4j建议只使用四个 ...
- Junit使用过程中需要注意的诡异bug以及处理办法
在开发过程中我们有时会遇到狠多的问题和bug,对于在编译和运行过程中出现的问题很好解决,因为可以在错误日志中得到一定的错误提示信息,从而可以找到一些对应的解决办法.但是有时也会遇到一些比较诡异的问题和 ...