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>
  1. 下载安装
    npm i -S classnames
  2. 使用
    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选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。

  1. 安装
npm i -S styled-components
  1. 定义样式

    样式js文件
    import styled from 'styled-components'
    const Title = styled.div`
    color:red;
    font-size:16px;
    h3{
    color:blue;
    font-size:20px;
    }
    `
    export {
    Title
    }

    显示

    就像使用常规 React 组件一样使用 Title

    import React, { Component } from 'react'
    import { Title } from './Styles'
    class App extends Component {
    render() {
    return (
    <div>
    <Title>
    我只是一个标题
    <h3>你好世界</h3>
    </Title>
    </div >
    );
    }
    }
    export default App
  2. 样式继承

    样式
    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
  3. 属性传递

    样式
    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样式设置方式的更多相关文章

  1. vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  2. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  3. React技巧之组件中返回多个元素

    原文链接:https://bobbyhadz.com/blog/react-return-multiple-elements 作者:Borislav Hadzhiev 正文从这开始~ fragment ...

  4. 第七十三篇:解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

  5. vue 组件中添加样式不生效

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 //// vue 组件 <template> <div class="box" data-v ...

  6. 讨论两种Redis中Token的存储方式

    摘要:本文讨论一个问题:存储token时,token与对应用户id谁来作为key? 问题起源问题起源于要给公司的后台管理系统添加权限管理,选用的是开源框架shiro,而原本系统上是采用token做了登 ...

  7. react 不能往组件中传入属性的值为 undefined

    在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder 刚开始以为设置为 null 即可,结果发现设置为 null ...

  8. vue--三种组件中之间的传值

    参考网址:https://www.jianshu.com/p/46573a741c29 一.父子组件之间的传值----props/$emit 组件之间的传值,我们比较常用到的是props/$emit ...

  9. QT中QToolTip样式设置的两种方式

    方式一 使用样式表设置 ui.label->setStyleSheet("QToolTip{border:1px solid rgb(118, 118, 118); backgroun ...

随机推荐

  1. 【C语言】第1章 程序设计与C语言

    第1章 程序设计与C语言 程序:一组计算机能识别和执行的 指令. 计算机语言:人和计算机交流信息的.计算机和人都能识别的语言 C语言允许用两种注释方式: //:单行注释 可单独占一行 可出现在一行中其 ...

  2. Spring笔记(2)

    一.AOP简介 1.概念: 面向切面编程(Aspect-Oriented Programming),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善. ...

  3. Tolist案例(父子传参实现增删改)

    1.Tolist案例(父子传参实现增删改) 目录结构 实现效果: App.jsx class App extends Component { // 状态在哪里, 操作状态的方法就在哪里 state = ...

  4. nios eclipse提示LED_PIO_BASE没有声明,怎么回事?

    这是因为名字不一致引起的比如,在生成SOPC系统时,双击PIO(Parallel I/O)(在Avalon Modules -> Other 下),为系统添加输出接口,你没有把该组件改名成LED ...

  5. golang sqlx

    在项目中我们通常可能会使用database/sql连接MySQL数据库.本文借助使用sqlx实现批量插入数据的例子,介绍了sqlx中可能被你忽视了的sqlx.In和DB.NamedExec方法. sq ...

  6. Sentry-CLI 使用详解(2021 Sentry v21.8.x)

    内容源于:https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创 ...

  7. RHCA-openstack学习部署笔记-CL210

    笔记说明:目前考试是基于RHELOSP13(32G)来进行环境部署,引入了容器,而学习是基于RHELOSP6来安装部署的,基于Openstack. 讨论:openstack.虚拟化和云计算的关系以及区 ...

  8. 性能环境之docker操作指南4(全网最全)

    容器的常用操作 docker run -i -t  /bin/bash 使用image创建container并进入交互模式, login shell是/bin/bash 实例: $ docker ru ...

  9. Python网编之简单的聊天小程序

    服务端: import socket sock = socket.socket() sock.bind(("127.0.0.1",8899)) sock.listen(5) whi ...

  10. Django项目中的模板继承

    1. 定义一个基础的页面HTML文件base.html <!DOCTYPE html> <html lang="en"> <head> < ...