React css-in-js基础介绍与应用

2024-10-02 03:27:17

1. 介绍

CSS-in-JS 是一种技术，而不是一个具体的库实现。简单来说 CSS-in-JS 就是将应用的CSS样式写在 JavaScript 文件里面，而不是独立为一些 css，scss 或 less 之类的文件，这样你就可以在 CSS 中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。CSS-in-JS 在 React 社区的热度是最高的，这是因为 React 本身不会管用户怎么去为组件定义样式的问题，而 Vue 有属于框架自己的一套定义样式的方案。

styled-components 应该是 CSS-in-JS 最热门的一个库，通过 styled-components，你可以使用 ES6 的标签模板字符串语法，为需要 styled 的 Component 定义一系列 CSS 属性，当该组件的 JS 代码被解析执行的时候，styled-components 会动态生成一个 CSS 选择器，并把对应的 CSS 样式通过 style 标签的形式插入到 head 标签里面。动态生成的 CSS 选择器会有一小段哈希值来保证全局唯一性来避免样式发生冲突。

在react项目中，可以让样式命名不冲突的方案

定义样式名称时，就让它唯一
使用内置的cssModule
css-in-js 把css当作js来使用

2. 使用

首先需要安装相关包：

yarn add styled-components

使用：

App.jsx：

import React, { Component } from 'react'
import Child from './components/Child-07-样式'
class App extends Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    )
  }
}
export default App

Child.jsx：

import React, { Component } from 'react'
// 导入样式组件
import { ChildContainer, TitleContainer, SubTitleContainer, ContentContainer } from './style'
class Child extends Component {
  render() {
    return (
      <ChildContainer>
        {/* <TitleContainer>我是一个child组件</TitleContainer> */}
        {/* 嵌套使用 */}
        <div className="title">我是一个child组件</div>
        <SubTitleContainer>我是一个副标题</SubTitleContainer>
        <hr />
        {/* 属性传递 */}
        <ContentContainer color='#00f' size="20">
          我是内容
        </ContentContainer>
      </ChildContainer>
    )
  }
}
export default Child

style.js：

// 使用css-in-js技术方案完成 react项目中的样式编写
// styled-components把样式当作组件来定义和使用，样式就是组件，组件就是样式
import styled from 'styled-components'
// 语法
// export const ChildContainer = styled.html标签名`样式`
export const ChildContainer = styled.div`
  /* 在此字符串模板中，写css就可以了 */
  font-size: 30px;
  color:#f0f;
  /* 嵌套定义 */
  .title{
    font-size:18px;
  }
`
export const TitleContainer = styled.div`
  color:red;
  font-size:18px;
`
// 样式继承
export const SubTitleContainer = styled(TitleContainer)`
  font-size:14px;
`
// 在样式中获取样式组件中的属性信息
export const ContentContainer = styled.div`
  color:${props => props.color || '#888'};
  font-size: ${props => props.size || 12}px;
`

到此这篇关于React css-in-js基础介绍与应用的文章就介绍到这了,更多相关React css-in-js内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

React+CSS 实现绘制竖状柱状图

前言: 页面结构分为两个部分,柱状图 + 文字为一部分,标注为为一部分. 先来看柱状图 + 文字这一部分. 宽度定为 width: 55, height 高度使用百分比进行动态变化.整个部分使用 flex 布局.通过 justify-content: space-around; 属性,对里面的项目进行排列.项目 item 同样使用 flex 布局,这个是对柱状图 + 文字进行整体的排列. <div className="crosswise_diagram_top"> {
React+CSS 实现绘制横向柱状图

前言: 页面一共分为两个结构文字 + 渐变柱形图为一个部分,下面的标注为一个结构. 我们先看文字 + 渐变柱形图部分. 总体使用 flex 布局,左边文字部分占总体的 50%,右边的占剩余的空间部分.右侧渐变柱形部分的宽度是动态变化的.宽度是根据传入的 value,进行计算的. <section className="graphs" style={style}> <div className="chart-1"> {listData.map
react使用CSS实现react动画功能示例

本文实例讲述了react使用CSS实现react动画功能.分享给大家供大家参考,具体如下: react动画: import React, { Component } from 'react'; class Boss extends Component { constructor(props) { super(props); this.state = { isShow:true } this.toTogger=this.toTogger.bind(this) } render() { return
react项目引入scss的方法

首先下载依赖 yarn add sass-loader node-sass 然后在项目路径 node_modules/react-scripts/config/webpack.config.js 打开文件找到加入红线内的代码 { test:/\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] }, 就可以使用scss了知识点扩展: React pwa的配置在到webpack配置文件中添加插件 const Wor
如何用react优雅的书写CSS

1.内联样式优点:这种方式较为简单,一目了然,给标签添加style属性. 缺点: 这种方式可以造成项目结构较为臃肿,造成css命名冲突. import React, { Component } from 'react' import PropTypes from 'prop-types' export default class index extends Component { static propTypes = { title: PropTypes.string } render() {
React中编写CSS实例详解

目录正文内联样式普通的CSS css modules css in js 样式组件引入外部变量默认值引入全局样式 provider 样式继承动态添加class 正文目前,前端最流行的开发方式是组件化,而CSS的设计本身就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方案在组件化开发环境下的CSS,应该满足如下需求: 可以编写局部css: css具备自己的具备作用域,不会随意污染其他组件内的元素可以编写动态的css: 可以获取当前组件的一些状态,根据状
ReactJs设置css样式的方法

前段时间看了React Native,但是感觉在安卓反面的开发并不成熟.有较多功能有待完善,而且自己在实际运用的过程中在一些模块上遇到了不晓得阻力,又苦于网上没有找到那么多资源.于是打算先放一段时间,还是回过头来看ReactJs吧. React颠覆了html的传统思维,代码基本都写在<script type="text/babel"></script>标签里面.我开发的时候采用的是IDEA,当然也可以使用atom或者webstor.使用IDEA时,需要在set
详解react的两种动态改变css样式的方法

第一种:动态添加class,以点击按钮让文字显示隐藏为demo import React, { Component, Fragment } from 'react'; import './style.css'; class Demo extends Component{ constructor(props) { super(props); this.state = { display: true } this.handleshow = this.handleshow.bind(this) thi
React css-in-js基础介绍与应用

目录 1. 介绍 2. 使用 1. 介绍 CSS-in-JS 是一种技术,而不是一个具体的库实现.简单来说 CSS-in-JS 就是将应用的CSS样式写在 JavaScript 文件里面,而不是独立为一些 css,scss 或 less 之类的文件,这样你就可以在 CSS 中使用一些属于JS的诸如模块声明,变量定义,函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义.CSS-in-JS 在 React 社区的热度是最高的,这是因为 React 本身不会管用户怎么去为组件定义样式的问题,而
React过渡动画组件基础使用介绍

目录 1. 基础使用 2. 将animate.css集成到csstranistion中 3. 列表过渡 4. switchTransition动画 5. 路由切换过渡 6. 高阶组件实现路由切换过渡 1. 基础使用介绍: 在项目中可能会给一些组件的显示或隐藏添加某种过渡动画,这样可以很好的增加用户的使用体验, react-transition-group 是 react 的第三方模块,借助这个模块可以实现动画切换效果. 安装: yarn add react-transition-group 使
javascript预加载图片、css、js的方法示例介绍

预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -
React+react-dropzone+node.js实现图片上传的示例代码

本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片.当然是用typescript需要提前下载相应的模块,在这里就不依依介绍了. 第一步,配置tsconfig.js "compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "
浅谈react+es6+webpack的基础配置

这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac
分离vue文件中css、js代码的简单技巧

目录场景方法 index.vue 基础代码 index.scss 基础代码 index.js 基础代码拓展代码总结场景 1.因为早期是iOS开发,形成的MVC习惯,个人喜欢css.js代码独立放一个文件里面,也就是分离样式模块和业务处理模块 2.写复杂界面.复杂业务的时候,界面.样式.业务代码都放.vue文件里面,代码量很大,几千上万行的,难受,割了吧(简单页面可忽略) 3.基于vue2 cli3项目方法挺简单的,就是利用下ES6的import和export 例如mockData
最细致的vue.js基础语法值得收藏!

介绍前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍. Vue读音/vju:/,和view类似.是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 可以去这里下载 .自己整理了一个Vue.js的demo, https://github.com/chenhao-ch/demo-vue 快速入门以下代码是Vue.js最简单的例子, 当input中的内容变化时,p节点的内容会跟着变化. <!-- html
JS基础系列之正则表达式

正则表达式是一个很牛逼的东东,今天在这里只是简单的给刚刚接触JS的人普及一下,里面若有争议的地方欢迎大家留言! 1.1 什么是正则表达式正则表达式(regular expression)是一个描述字符模式的对象,ECMAScript的RegExp 类表示正则表达式,而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数. 正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具. 1.2 正则表达式的作用正则表达式主要用来验证
JS基础教程——正则表达式示例(推荐)

正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字.[\s*]表示空格或者*号. {}一般用来表示匹配的长度,比如 \s{3} 表示匹配三个空格,\s[1,3]表示匹配一到三个空格. (0-9) 匹配 '0-9′ 本身. [0-9]* 匹配数字(注意后面有 *,可以为空)[0-9]+ 匹配数字(注意后
XML、HTML、CSS与JS的区别整理

在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会. 首次,我们看一下这四项技术都是什么,能干什么? (一)XML-Extensible Markup Language 可扩展标记语言(标准通用标记语言的子集)是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可以用方便的方式建立,虽然可扩展标记语言占用的空间比二进制数据要占用更多的空间,但可扩展标记语言极其简单易于掌握和使用. <Hello> <bcd>C

React css-in-js基础介绍与应用

目录

1. 介绍

2. 使用

相关推荐

随机推荐