style 放入css文件失效_React中使用CSS的7种方式
来源 | http://www.fly63.com/article/detial/1961
1、在组件中直接使用style
不需要组件从外部约会css文件,直接在组件中书写。
import react, { Component } from "react";const div1 = { width: "300px", margin: "30px auto", backgroundColor: "#44014C", //驼峰法 minHeight: "200px", boxSizing: "border-box"};class Test extends Component { constructor(props, context) { super(props); } render() { return (
123
);
}
}
export default Test;
注意事项:在正常的css中,设置background-color,box-sizing等属性,在style对象div 1中的属性中,必须转换成驼峰法,backgroundColor,boxSizing。而没有连字符的属性,如margin,width等,则在style对象中不变。在正常的css中,css的值不需要用双引好(“”),如
.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white;}
而在react中使用style对象的方式时。值必须用双引号包裹起来。这种方式的反应样式,只作用于当前组件。
2、在组件中约会[name].css文件
需要在当前组件开头使用import♡ css文件。
import react, { Component } from "react";import TestChidren from "./TestChidren";import "@/assets/css/index.scss";class Test extends Component { constructor(props, context) { super(props); } render() { return (
123
测试子组件的样式
); }}export default Test;
这种方式约会的css样式,会作用于当前组件及其所有后代组件。
3、在组件中约会[name] .s css文件
引入反应内部已经支持了后缀为SCSS的文件,所以只需要安装节点萨斯即可,因为有个节点萨斯SCSS文件才能在节点环境上编译成的CSS文件。
>yarn add node-sass
然后编写scss文件
//index.scss.App{ background-color: #282c34; .header{ min-height: 100vh; color: white; }}
关于如何详细的使用sass,请查看sass官网:
这种方式约会的css样式,同样会作用于当前组件及其所有后代组件。
4、在组件中约会[name] .module.css文件
将css文件作为一个模块约会,这个模块中的所有css,只作用于电流组件。不会影响电流组件的后代组件。
import react, { Component } from "react";import TestChild from "./TestChild";import moduleCss from "./test.module.css";class Test extends Component { constructor(props, context) { super(props); } render() { return (
321321
); }}export default Test;
这种方式可以看做是前面第一种在组件中使用style的升级版。完全将css和组件分离开,又不会影响其他组件。
5、在组件中约会[name] .module.scss文件
某种第四种,区别是第四种约会css模块,而这种是约会scss模块而已。
import react, { Component } from "react";import TestChild from "./TestChild";import moduleCss from "./test.module.scss";class Test extends Component { constructor(props, context) { super(props); } render() { return (
321321
); }}export default Test;
同样这种方式可以看做是前面第一种在组件中使用style的升级版。
6、使用styled-components
需要先安装
>yarn add styled-components
然后创建一个js文件(注意是js文件,不是css文件)
//style.jsimport styled, { createGlobalStyle } from "styled-components";export const SelfLink = styled.div` height: 50px; border: 1px solid red; color: yellow;`;export const SelfButton = styled.div` height: 150px; width: 150px; color: ${props => props.color}; background-image: url(${props => props.src}); background-size: 150px 150px;`;
组件中使用styled-components样式
import React, { Component } from "react";import { SelfLink, SelfButton } from "./style";class Test extends Component { constructor(props, context) { super(props); } render() { return (
app.js
SelfButton
); }}export default Test;
这种方式是将整个的CSS样式,和HTML节点整体合并成一个组件。引入这个组件的HTML和CSS都有了。它的好处在于可以随时通过往组件上传入属性,来动态的改变样式。对于处理变量,媒体查询,伪类等较方便的。
这种方式的css也只对当前组件有效。
具体用法,请查看styled-components官网:https://styled-components.com/
7、使用radium
需要先安装
>yarn add radium
然后在react组件中直接约会使用
import React, { Component } from "react";import Radium from 'radium';let styles = { base: { color: '#fff', ':hover': { background: '#0074d9' } }, primary: { background: '#0074D9' }, warning: { background: '#FF4136' }};class Test extends Component { constructor(props, context) { super(props); } render() { return (
this is a primary button
); }}export default Radium(Test);
对于处理变量,媒体查询,伪类等是不方便的。使用Radium可以直接处理变量,媒体查询,伪类等,并且可以直接使用js中的数学,连接,正则表达式,条件,函数等。具体用法请查看radium官网:https://formidable.com/open-source/radium/注意:在export之前,必须用Radium包裹。
style 放入css文件失效_React中使用CSS的7种方式相关推荐
- 函数 —— strtok() 例如:按照字符拆分字符串,放入新定义的数组中;按照字符拆分字符串,放入原先的数组中
问题描述: 原始数组:char str[80] = "This is - aa bb - cc - dd"; 新定义的数组: char newstr[80]= {0}; ...
- C# 让你解决方案乱七八糟的DLL放入指定文件夹
C# 让你解决方案乱七八糟的DLL放入指定文件夹 参考文章: (1)C# 让你解决方案乱七八糟的DLL放入指定文件夹 (2)https://www.cnblogs.com/Dinnerbone/p/1 ...
- 13.请编一个函数void fun(int tt[M][N],int pp[N]),tt指向一个M行N列的二维数组,求出二维数组每列中最小元素,并依次放入pp所指一维数组中。
13.请编一个函数void fun(int tt[M][N],int pp[N]),tt指向一个M行N列的二维数组,求出二维数组每列中最小元素,并依次放入pp所指一维数组中.二维数组中的数已在主函数中 ...
- 请编写一个函数void fun(int tt[M][N],int pp[N]),tt指向一个M行N列的二维数组,求出二维数组每列中最小元素,并依次放入pp所指一维数组中。
#include <iostream> #include<iomanip> using namespace std; #define M 3 #define N 4 /*求出二 ...
- C语言编程>第七周 ⑧ 请编一个函数void fun(int a[M][N],int b[N]),c指向一个M行N列的二维数组,求出二维数组每列中最大元素,并依次放入b所指一维数组中。
例题:请编一个函数void fun(int a[M][N],int b[N]),c指向一个M行N列的二维数组,求出二维数组每列中最大元素,并依次放入b所指一维数组中.二维数组中的数己在主函数中赋予. ...
- JAVA自动生成雪碧图sprites和样式CSS文件(包含原始图标CSS、雪碧图CSS)
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
- html如何引入css文件?HTML引入外部css文件的四种方法
在学习前端的时候,我们应该知道css给html标记添加各种样式,用来告诉浏览器,因该如何显示这些标记里面的内容.既然css是用来给html添加各种样式的,那么,html中如何引入外部的css文呢?本篇 ...
- php laravel 加载css,Laravel无法加载css文件(Laravel can't load css file)
Laravel无法加载css文件(Laravel can't load css file) 我无法在Laravel项目中加载css文件. /public/css/style.css确实存在IDE确认, ...
- html引入css报错,html中引入css样式的方法总结
CSS是用来控制网页数据的表现,可以使网页的表现与数据内容分离.要想让CSS对网页内容有效果,必须将CSS代码引入网页,使网页更具有美观性,有动感的效果,那么如何实现引入css呢?今天就来给大家总结! ...
最新文章
- 《CCNP ROUTE (642-902 )认证考试指南》一1.2 将考试主题与典型网络工程师的工作关联起来...
- python答题系统的代码_答题辅助python代码实现
- video.js android,VideoJS + HTML5自动播放失败,适用于Android 2.3+和IOS 4+
- OPPO Reno6系列将推Bobbi Brown联名版
- hive 中文字符过滤_0650-6.2.0-通过UDF实现HiveImpala的中文拼音排序
- android 布局属性
- Futter基础第13篇: 实现Drawer侧边栏、以及侧边栏内容布局
- 一个大四毕业生想对自学Android的大学生说一些话
- Ubuntu18.04下NVIDIA CUDA安装指南和DeepLearning4J GPU配置
- 智能优化算法:哈里斯鹰算法-附代码
- STM32 系列产品命名规则 - 《STM32中文参考手册_V10》
- macbook插入耳机不出声
- python实现输入一个正整数_Python中实现输入一个整数的案例
- 关于大学生课余时间分配利用的调查报告
- 部分ADSL猫的默认密码
- linux查看riak版本,riak源码阅读手记 压力测试
- OA系统开发,了解O2OA开发平台,如何使用?
- Android canvas.drawArc() 画圆弧
- 通过浏览器向桌面弹框示例
- 【论文阅读】OUTRAGEOUSLY LARGE NEURAL NETWORKS: THE SPARSELY-GATED MIXTURE-OF-EXPERTS LAYER
热门文章
- 对于dts的理解和分析
- 高级工程师职英语计算机,高级工程师要考英语吗
- oracle11关闭账户验证,Windows下Oracle11g中使用外部操作系统账户验证
- php 验证微信token_php之微信公众号验证token获取access_token
- python做自动化测试的优点_乐搏讲自动化测试-python语言特点及优缺点(5)
- python找出在原图中的位置_用python简单处理图片(4):图像中的像素访问
- python mysql example_Python_Example_ Pycharm(python) 与 数据库(MySQL) 连接学习/示例
- python列表的实现原理_python列表推导式原理和使用方法
- oracle查询重复数据出现次数
- Linux查看端口、进程情况及kill进程