IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> React中使用css -> 正文阅读

[JavaScript知识库]React中使用css

内联样式

联样式是官方推荐的一种css样式的写法:

  1. style 接受一个采用小驼峰命名属性的 JavaScript 对象,,而不是 CSS 字符串;
  2. 并且可以引用state中的状态来设置相关的样式

问题:
(1)写法上都需要使用驼峰标识
(2)某些样式无法编写(比如伪类/伪元素)

export default class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    const pStyle = {
      color: this.state.color,
      textDecoration: "underline"
    }
    return (
      <div>
        <h2 style={{fontSize: "50px", color: this.state.color}}>我是标题</h2>
        <p style={pStyle}>我是一段文字描述</p>
      </div>
    )
  }
}

普通的css

  1. 普通的css我们通常会编写到一个单独的文件,之后再进行引入

问题:
(1)普通的css都属于全局的css,样式之间会相互影响,会被层叠掉

import './style.css';
export default class App extends PureComponent {
  render() {
    return (
      <div id="app">
        <span>App</span>
        <h2 className="title">我是App的title</h2>
      </div>
    )
  }
}

.
css modules

React的脚手架已经内置了css modules的配置解决局部作用域的问题

  1. .css/.less/.scss 等样式文件都修改成
  2. xxx.module.less
  3. xxx.module.css
  4. xxx.module.scss 之后就可以引用并且进行使用了

问题
(1)引用的类名,不能使用连接符(.home-title),在JavaScript中是不识别的
(2)所有的className都必须使用{style.className} 的形式来编写
(3)不方便动态来修改某些样式,依然需要使用内联样式的方式

#app  .title {
  color: blue;
}
import appStyle from './style.module.css';
export default class App extends PureComponent {
  render() {
    return (
      <div id="app">
        App
        <h2 className={appStyle.title}>我是App的title</h2>
      </div>
    )
  }
}

CSS in JS 由第三方库提供

“CSS-in-JS” 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义

目前比较流行的CSS-in-JS的库

  1. styled-components 最流行 安装 npm i styled-components
  2. emotion
  3. glamorous

styled-components

styled-components的本质是通过函数的调用,最终创建出一个组件:

  1. 这个组件会被自动添加上一个不重复的class
  2. styled-components会给该class添加相关的样式
  3. 支持直接子代选择器或后代选择器,并且直接编写样式
  4. 支持样式的继承
/**
 * 特点:
 *  1.props穿透  获取props需要通过${}传入一个插值函数,props会作为该函数的参数
 *  2.attrs的使用  可以通过attrs给标签绑定属性
 *  3.传入state作为props属性  可以获取到标签上和attrs配置对象上的属性
 */
import styled from 'styled-components'
import { HomeWrapper } from "./style"
const myInput = styled.input.attrs({
  placeholder: "coderwhy",
  bColor: "red"
})`
  background-color: lightblue;
  border-color: ${props => props.bColor};
  color: ${props => props.color};
`
const testInput = styled(myInput)`
	color: #fff;
  	background-color: green;
`
export default class Profile extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      color: "purple"
    }
  }
  render() {
    return (
      <div>
        <input type="password"/>
        <HYInput type="password" color={this.state.color}/>
      </div>
    )
  }
}

style.js 文件

import styled from 'styled-components';
// 可以导出多个
export const HomeWrapper = styled.div`
  font-size: 12px;
  color: red;
  .banner {
    background-color: blue;
    span {
      color: #fff;
      &.active {
        color: red;
      }
      &::after {
        content: "aaa"
      }
    }
  }
`
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-19 11:47:14  更:2021-10-19 11:47:42 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/13 8:12:49-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码