react之四种组件中DOM样式设置方式
1、行内样式
想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现
行内样式需要写入一个样式对象,而这个样式对象的位置可以放在很多地方
例如:render
函数里、组件原型上、外链js文件中
注意:这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号
<p style={{color:'red', fontSize:'14px'}}>Hello world</p>
2、使用class
React推荐我们使用行内样式,因为React觉得每一个组件都是一个独立的整体
其实我们大多数情况下还是大量的在为元素添加类名,但是需要注意的是,class
需要写成className
(因为毕竟是在写类js代码,会收到js规则的现在,而class
是关键字)
import React, { Component } from 'react'
1. 外部引入定义的样式
import styles from './style.css'
class ClassStyle extends Component {
render() {
// js逻辑
let className = cx({
font: false
})
return (
<>
<div className={className}>hello</div>
<p className='setstyle'>样式</p>
<DivContainer>
world
</DivContainer>
<>
)
}
}
export default ClassStyle
3、classNames不同的条件添加不同的样式
有时候需要根据不同的条件添加不同的样式,比如:完成状态,完成是绿色,未完成是红色。那么这种情况下,我们推荐使用classnames这个包:
目的:
由于react原生动态添加多个className会报错
import style from './style.css'
<div className={style.class1 style.class2}</div>
想要得到最终渲染的效果是:
<div class='class1 class2'></div>
- 下载安装
npm i -S classnames
- 使用
import classnames from 'classnames'
<div className=classnames({
'class1': true,
'class2': true
)>
</div>
4、css-in-js
styled-components
是针对React写的一套css-in-js框架,简单来讲就是在js中写css。npm链接
- 传统的前端方案推崇"关注点分离"原则,HTML、CSS、JavaScript 应该各司其职,进行分离。
- 而在react项目中,更提倡组件化方案,自然形成了将HTML、CSS、JavaScript集中编写管理的方式。
styled-components 应该是CSS-in-JS最热门的一个库,通过styled-components,你可以使用ES6的标签模板字符串语法,为需要styled的Component定义一系列CSS属性,当该组件的JS代码被解析执行的时候,styled-components会动态生成一个CSS选择器,并把对应的CSS样式通过style标签的形式插入到head标签里面。动态生成的CSS选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。
- 安装
npm i -S styled-components
- 定义样式
样式js文件import styled from 'styled-components'
const Title = styled.div`
color:red;
font-size:16px;
h3{
color:blue;
font-size:20px;
}
`
export {
Title
}
显示
就像使用常规 React 组件一样使用 Titleimport React, { Component } from 'react'
import { Title } from './Styles'
class App extends Component {
render() {
return (
<div>
<Title>
我只是一个标题
<h3>你好世界</h3>
</Title>
</div >
);
}
}
export default App
- 样式继承
样式import styled from 'styled-components'
const Button = styled.button`
font-size: 20px;
border: 1px solid red;
border-radius: 3px;
`; // 一个继承 Button 的新组件, 重载了一部分样式
const Button2 = styled(Button)`
color: blue;
border-color: yellow;
`; export {
Button,
Button2
}
显示
import React, { Component } from 'react'
import {
Button,
Button2
} from './Styles'
class App extends Component {
render() {
return (
<div>
<Button>我是一个按钮1</Button>
<Button2>我是一个按钮2</Button2>
</div >
);
}
}
export default App
- 属性传递
样式import styled from 'styled-components'
const Input = styled.input`
color: ${props => props.inputColor || "blue"};
border-radius: 3px;
`;
export {
Input
}
显示
import React, { Component } from 'react'
import { Input } from './Styles'
class App extends Component {
render() {
return (
<div>
<Input defaultValue="你好" inputColor="red"></Input>
</div >
);
}
}
export default App
react之四种组件中DOM样式设置方式的更多相关文章
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
- vue组件中的样式属性--scoped
Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...
- React技巧之组件中返回多个元素
原文链接:https://bobbyhadz.com/blog/react-return-multiple-elements 作者:Borislav Hadzhiev 正文从这开始~ fragment ...
- 第七十三篇:解决Vue组件中的样式冲突
好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...
- vue 组件中添加样式不生效
如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v ...
- 讨论两种Redis中Token的存储方式
摘要:本文讨论一个问题:存储token时,token与对应用户id谁来作为key? 问题起源问题起源于要给公司的后台管理系统添加权限管理,选用的是开源框架shiro,而原本系统上是采用token做了登 ...
- react 不能往组件中传入属性的值为 undefined
在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder 刚开始以为设置为 null 即可,结果发现设置为 null ...
- vue--三种组件中之间的传值
参考网址:https://www.jianshu.com/p/46573a741c29 一.父子组件之间的传值----props/$emit 组件之间的传值,我们比较常用到的是props/$emit ...
- QT中QToolTip样式设置的两种方式
方式一 使用样式表设置 ui.label->setStyleSheet("QToolTip{border:1px solid rgb(118, 118, 118); backgroun ...
随机推荐
- 【C语言】第1章 程序设计与C语言
第1章 程序设计与C语言 程序:一组计算机能识别和执行的 指令. 计算机语言:人和计算机交流信息的.计算机和人都能识别的语言 C语言允许用两种注释方式: //:单行注释 可单独占一行 可出现在一行中其 ...
- Spring笔记(2)
一.AOP简介 1.概念: 面向切面编程(Aspect-Oriented Programming),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善. ...
- Tolist案例(父子传参实现增删改)
1.Tolist案例(父子传参实现增删改) 目录结构 实现效果: App.jsx class App extends Component { // 状态在哪里, 操作状态的方法就在哪里 state = ...
- nios eclipse提示LED_PIO_BASE没有声明,怎么回事?
这是因为名字不一致引起的比如,在生成SOPC系统时,双击PIO(Parallel I/O)(在Avalon Modules -> Other 下),为系统添加输出接口,你没有把该组件改名成LED ...
- golang sqlx
在项目中我们通常可能会使用database/sql连接MySQL数据库.本文借助使用sqlx实现批量插入数据的例子,介绍了sqlx中可能被你忽视了的sqlx.In和DB.NamedExec方法. sq ...
- Sentry-CLI 使用详解(2021 Sentry v21.8.x)
内容源于:https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创 ...
- RHCA-openstack学习部署笔记-CL210
笔记说明:目前考试是基于RHELOSP13(32G)来进行环境部署,引入了容器,而学习是基于RHELOSP6来安装部署的,基于Openstack. 讨论:openstack.虚拟化和云计算的关系以及区 ...
- 性能环境之docker操作指南4(全网最全)
容器的常用操作 docker run -i -t /bin/bash 使用image创建container并进入交互模式, login shell是/bin/bash 实例: $ docker ru ...
- Python网编之简单的聊天小程序
服务端: import socket sock = socket.socket() sock.bind(("127.0.0.1",8899)) sock.listen(5) whi ...
- Django项目中的模板继承
1. 定义一个基础的页面HTML文件base.html <!DOCTYPE html> <html lang="en"> <head> < ...