纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

react组件DOM样式 react四种组件中DOM样式设置方式详解

久宇诗   2021-10-11 我要评论
想了解react四种组件中DOM样式设置方式详解的相关内容吗,久宇诗在本文为您仔细讲解react组件DOM样式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:react组件DOM样式,react组件,下面大家一起来学习吧。

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选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。

1.安装

npm i -S styled-components

定义样式
2.样式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

3.样式继承
样式

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

4.属性传递
样式

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

相关文章

猜您喜欢

  • js购物网站商品放大镜效果 js实现购物网站商品放大镜效果

    想了解js实现购物网站商品放大镜效果的相关内容吗,夜深人静_在本文为您仔细讲解js购物网站商品放大镜效果的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js购物网站商品放大镜,js购物放大镜,js商品放大镜,下面大家一起来学习吧。..
  • C语言 文件读写 feof 函数 关于C语言 文件读写 feof 函数

    想了解关于C语言 文件读写 feof 函数的相关内容吗,猿说编程在本文为您仔细讲解C语言 文件读写 feof 函数 的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C语言,文件读写,feof,函数,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.3a4a5a.com 【3A软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式