返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何用react优雅的书写CSS
  • 632
分享到

如何用react优雅的书写CSS

2024-04-02 19:04:59 632人浏览 独家记忆
摘要

目录1.内联样式 2.使用import导入方式 3.CSS module模块导出 4.使用styled-components 4.1初步使用4.2通过attrs设置属性4.3css继

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() {
        const h1Style={textAlign:'center',marginBottom:'20px',lineHeight:'35px',
        height:'30px'}
        const {title}=this.props
        return (
         <div>
             <h1 style={h1Style}>{title}</h1>
             <hr/>
         </div>
        )
    }
}

2.使用import导入方式

优点:这种方式使用起来更加灵巧,类似于css中的外部引入

缺点:因为react样式默认是全局样式,很有可能造成样式冲突

使用:新建css文件,在jsx语法中通过className属性设置类名,在css使用类名,这种方式可以使用三元表达式,通过定义变量来选择类名。


import React, { Component } from 'react'
import "./index.css"
export default class index extends Component {
    state={
        flag:true
    }
changeColor=()=>{
    this.setState((state,props)=>{
        return{
           flag:!state.flag
        }
    })
}
    render() {
        const {flag}=this.state
        return (
            <div>
                <h1 className={flag?'blueColor':'redColor'}>莫等闲,白了少年头</h1>
                <button onClick={this.changeColor} className="btnStyle">点击更改字体颜色</button>
            </div>
        )
    }
}


.blueColor{
    color: blue;
}
.redColor{
    color: red;
}
.btnStyle{
    width: 260px;
    height: 50px;
    background-color: aqua;
    color: #fff;
    border:none;
    font-size: 28px;
    border-radius: 10px;
}

3.css module模块导出

优点:不会造成命名冲突,样式局部有效

缺点:太过麻烦,每次都需要模块导入导出,相当于将css所有类名作为一个对象的属性,在需要使用该对象属性时,通过调用对象属性的方式调用类名,解决css冲突的方式是给不同的类名添加前缀,类似于Vue中给style设置module

使用:

  • 在cra脚手架中只要在父组件中引入了css样式,那么这个样式就是全局样式
  • 在react中用模块化来解决样式冲突的问题
  • 在cra脚手架中,如果某个样式文件要开启模块化,只需要把样式文件命名为xx.module.css/xx.module.scss就可以了


import React,{FC,useState} from "react"
import Cmittem from "@/components1/cmittem"
import cssObj from "./cmtlist.module.scss"
const Cmtlist:FC<{}>=(props)=>{
    return (
        <div>
             <h1 className={cssObj.title}>评论列表</h1>
       
       </div>
    )
}

export default Cmtlist

4.使用styled-components

优点: 使用模板字符串标签+样式组合后是一个大写字母开头表示的组件,比如可以说是将react开发中最流行的一些写法整合起来,对于React开发者来说,是非常好入手的。那么,在react组件中,使用外部css还是组件css,不同的开发者习惯不同。

使用:

需要安装styled-components

npm i styled-components或者yarn add styled-components

vscode安装插件便于书写

4.1初步使用


import 'antd/dist/antd.less'
import styled from 'styled-components'
function App() {
 const HomeWrapper=styled.div`
 font-size:50px;
 color:red;
 span{
   color:orange;
   &.active{
      color:green;
   }
   &:hover{
     color:blue;
     font-size:40px;
   }
   &::after{
     content:'ssss'
   }
   }
 `
  return (
    <div className="App">
 <h1 >我是一个标题</h1>
 <HomeWrapper>
 <h2>我是一个副标题</h2>
   <span>轮播1</span>
   <span className="active">轮播2</span>
   <span>轮播3</span>
   <span>轮播4</span>
 </HomeWrapper>
    </div>
  );
}

export default App;

4.2通过attrs设置属性


import 'antd/dist/antd.less'
import styled from 'styled-components'
function App() {
 const ChangeInput=styled.input.attrs({
   placeholder:'wangsu',
   bGColor:'red'
 })`
 background-color:#7a7ab4;
 color:${props=>props.bgColor}
 `
  return (
    <div className="App">
 <h1 >我是一个标题</h1>
 <ChangeInput type="text"/>
    </div>
  );
}

export default App;

4.3css继承


import React, { Component } from 'react'
import styled from 'styled-components'
const HYbutton=styled.button`
   color:red;
   border:1px solid #ccc;
   padding:10px 20px;
`
//这里使用继承
const XLbutton=styled(HYbutton)`
background-color:blue;
`
export default class Button extends Component {

    render() {
        return (
            <div>
                <HYbutton>这是一个按钮</HYbutton>
                <XLbutton>这是一个继承按钮</XLbutton>
            </div>
        )
    }
}

这几天在开发项目时,一直使用的这种方式,感觉很新颖,虽然社区各有争议,但是个人喜欢这种方式设置css,完全不用考虑全局的样式问题

以上就是如何用react优雅的书写CSS的详细内容,更多关于react 书写CSS的资料请关注编程网其它相关文章!

--结束END--

本文标题: 如何用react优雅的书写CSS

本文链接: https://lsjlt.com/news/123716.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何用react优雅的书写CSS
    目录1.内联样式 2.使用import导入方式 3.css module模块导出 4.使用styled-components 4.1初步使用4.2通过attrs设置属性4.3css继...
    99+
    2024-04-02
  • Vue后台中如何优雅的书写状态标签
    这篇文章主要介绍Vue后台中如何优雅的书写状态标签,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!前言在后台系统开发中,对于列表,常常有一些状态字段的展示,比如审核状态、退货申请状态等等,并且往往伴随有状态筛选的列表查...
    99+
    2023-06-20
  • 如何写出优雅的vue.js
    这篇文章主要为大家展示了“如何写出优雅的vue.js”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何写出优雅的vue.js”这篇文章吧。1. watch 与 ...
    99+
    2024-04-02
  • 如何编写优雅的Dockerfile
    导读Kubernetes要从容器化开始,而容器又需要从Dockerfile开始,本文将介绍如何写出一个优雅的Dockerfile文件。文章主要内容包括:Docker容器Dockerfile使用多阶构建感谢公司提供大量机器资源及时间让我们可以...
    99+
    2023-06-03
  • React如何优雅的捕获异常
    目录前言 ErrorBoundary Error Boundary 之外 try/catch window.onerror , error事件 unhandledrejection ...
    99+
    2024-04-02
  • 详解如何在React中优雅的使用addEventListener
    目录使用 addEventListener 代替第三方库的事件方法一:state 变化,卸载/绑定事件方法二:使用闭包的方式卸载事件方法三:使用 ref 保存状态优化 state 手...
    99+
    2023-01-31
    React使用addEventListener React addEventListener
  • vue3+ts实际开发中该如何优雅书写vue3语法
    目录vue3语法的发展优势Composition Api类型约束编译器宏definePropsdefineEmitsdefineExpose总结vue3语法的发展 Vue3 在早期版...
    99+
    2022-11-13
    vue3 ts 教程 vue3 写法 vue方法怎么写
  • 如何写出优雅的JS 代码
    目录变量使用有意义和可发音的变量名对同一类型的变量使用相同的词汇使用可搜索的名字使用解释性变量避免费脑的猜测无需添加不必要的上下文使用默认参数代替逻辑或(与)运算函数函数参数(理想情...
    99+
    2024-04-02
  • 如何在React项目中优雅的使用对话框
    目录背景场景一场景二场景三问题一:难以扩展问题二:维护问题问题的本质对话框的本质全局的状态管理的对话框整体的架构具体实现Redux - reducer 存储Redux - actio...
    99+
    2024-04-02
  • 怎么写出优雅耐看的css代码
    这篇“怎么写出优雅耐看的css代码”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面...
    99+
    2024-04-02
  • 书写Python代码的一种更优雅方式(推荐!)
    目录1 简介2 在Python中配合pipe灵活使用链式写法2.1 pipe中常用的管道操作函数2.1.1 使用traverse()展平嵌套数组2.1.2 使用dedup()进行顺序...
    99+
    2024-04-02
  • 如何借助AngularJS写优雅的代码
    本篇文章为大家展示了如何借助AngularJS写优雅的代码,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。接触AngularJS还真有点碰巧,在用JQuery写数据绑...
    99+
    2024-04-02
  • Vue后台中优雅书写状态标签的方法实例
    目录前言优化抽离变量二次封装 el-tag 组件使用总结前言 在后台系统开发中,对于列表,常常有一些状态字段的展示,比如审核状态、退货申请状态等等,并且往往伴随有状态筛选的列表查询...
    99+
    2024-04-02
  • css的四种优先级书写方式分享
    这篇文章主要讲解了“css的四种优先级书写方式分享”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css的四种优先级书写方式分享”吧!优先级: 外部样式 &l...
    99+
    2024-04-02
  • React之如何在Suspense中优雅地请求数据
    目录什么是 Sunpense懒加载挂起懒加载组件的加载过程对需要请求数据的组件使用 Suspensereact-cache自己写一个加工函数请求数据的时机结论什么是 Sunpense...
    99+
    2023-05-17
    在Suspense中请求数据 React Suspense Suspense请求数据
  • React中的css如何使用
    这篇文章主要介绍了React中的css如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React中的css如何使用文章都会有所收获,下面我们一起来看看吧。一、行内样式使用import React...
    99+
    2023-06-27
  • 如何用TypeScript编写React
    这篇文章主要讲解了“如何用TypeScript编写React”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用TypeScript编写React”吧!Re...
    99+
    2024-04-02
  • React组件如何优雅地处理异步数据详解
    目录前言API介绍SuspenseError Boundaries完整方案处理异步请求的子组件外层组件总结前言 我们在编写React应用的时候,常常需要在组件里面异步获取数据。因为异...
    99+
    2022-11-13
    React处理异步数据 React 异步数据
  • 如何优化CSS代码写法
    今天就跟大家聊聊有关如何优化CSS代码写法,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。众所周知,SEO优化很重要的一点就是布局,而DIV+CSS布...
    99+
    2024-04-02
  • 如何使用HTML书写标题
    这篇文章主要介绍了如何使用HTML书写标题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 HTML标题: 在HTML文档中,其标题的作用...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作