如何用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() {
        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的资料请关注我们其它相关文章!

(0)

相关推荐

  • react项目如何运行在微信公众号

    说明:项目是create-react-app结合antd-mobile写的H5,在微信公众号里运行. 1.使用a标签预览或下载PDF.写法如下,手机上点击无反应,电脑上点击网页崩溃. <a href='pdf或图片路径'> PDF或图片名称 </a> 原因是浏览器监测到访问非安全访问,给拦截下来了.于是根据报错提示,新增target和rel两个属性,写法如下: <a href='pdf或图片路径' target='_blank' rel="noreferrer&qu

  • React使用高德地图的实现示例(react-amap)

    pc版React重构,使用到了高德地图.搜了资料,发现有一个针对React进行封装的地图插件react-amap.官方网址:https://elemefe.github.io/react-amap/components/map,有兴趣的可以看下里面的API. react-amap 安装 1.使用npm进行安装,目前是1.2.8版本: cnpm i react-amap 2.直接使用sdn方式引入 <script src="https://unpkg.com/react-amap@0.2.5

  • react中的虚拟dom和diff算法详解

    虚拟DOM的作用 首先我们要知道虚拟dom的出现是为了解决什么问题的,他解决我们平时频繁的直接操作DOM效率低下的问题.那么为什么我们直接操作DOM效率会低下呢? 比如我们创建一个div,我们可以在控制台查看一下这个div上自带或者继承了很多属性,尤其是我们使用js操作DOM的时候,我们的DOM本身就很复杂,js的操作也会占用很多时间,但是我们控制不了DOM元素本身,因此虚拟DOM解决的是js操作DOM这一层面,其实解决的是减少了操作dom的次数 简单实现虚拟DOM 虚拟DOM,见名知意,就是假

  • 从头写React-like框架的工程搭建实现

    最近在网上看到了 Build your own React 这篇文章,作者从零开始实现了一个简易类 React 框架,虽然没有过多的优化,但 React 中的核心思想 Concurrent Mode,Fiber Reconciler 等都有实现,看完后对理解 React 有很大帮助,因此我想在 Build your own React 的基础上,对代码进行拆分,搭建起自己的框架工程,然后完善教程中没完成的其他功能,代码在 rac 中. 工程搭建 技术栈上我选择用 TypeScript 开发,Ro

  • 封装一个最简单ErrorBoundary组件处理react异常

    前言 从 React 16 开始,引入了 Error Boundaries 概念,它可以捕获它的子组件中产生的错误,记录错误日志,并展示降级内容,具体 官网地址 错误边界避免一个组件错误导致整个页面白屏不能使用等情况,使用优雅降级的方式呈现备用的 UI,错误边界可以在渲染期间.生命周期和整个组件树的构造函数中捕获错误.自 React 16 起,任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载 ErrorBoundary 意义 某些 UI 崩溃,不至于整个 webapp 崩溃 在浏

  • React useEffect的理解与使用

    React16.8新增的useEffec这个hook函数就是处理副作用的. 所谓的"副作用",举个通俗一点的例子,假如感冒了本来吃点药就没事了,但是吃了药发现身体过敏了,而这个"过敏"就是副作用. 放到React中,本来只是想渲染DOM展示到页面上,但除了DOM之外还有数据,而这些数据必须从外部的数据源中获取,这个"获取外部数据源"的过程就是副作用. useEffect怎么用可以参考官网给出的例子,这里主要针对使用useEffect过程中遇到的问

  • React三大属性之Refs的使用详解

    refs是React中用来取得某个JSX组件或者某个DOM中的一些状态值的时候,用来获取节点的方法.在React官方的解释中,它的适用范围如下: 管理焦点,文本选择或媒体播放. 触发强制动画. 集成第三方 DOM 库. React文档中再三强调,请不要过度使用refs,所以当我们可以用dom原生对象解决时,尽量不要使用refs 依照之前的写法,首先是给出类组件和函数组件中refs的写法 类组件 在类中,refs有三种方式,目前最常用的是回调的形式使用,分别进行演示 //直接定义refs,已废弃

  • react显示文件上传进度的示例

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 在使用react, vue框架的时候, 如果需要监听文件上传可以使用axios里的onUploadProgress. react上传文件显示进度 demo 前端 快速安装react应用 确保有node环境 npx create-react-app my-app //当前文件夹创建my-app文件 cd my-app //进入目录 npm install antd //安装antd UI组件 npm

  • React Fiber结构的创建步骤

    React Fiber的创建 当前React版本基于V17.0.2版本,本篇主要介绍fiber结构的创建. 一.开始之前 个人理解,如有不对,请指出. 首先需要配置好React的debugger开发环境,入口在这里:github 执行npm run i,安装依赖,npm start运行环境. 二.从React.render开始 通过在项目入口处调用React.render,打上Debug,查看React调用栈. const root = document.getElementById('root

  • react如何用懒加载减少首屏加载时间

    最近在写一个react-ant-admin的集成框架用于快速搭载中后台项目.其中遇到很多问题,最重要的应该是访问速度了.我就想 react 可不可以和 vue 一样用路由懒加载来减少首页渲染所花费的时间. 于是找到了一个很好用的轮子:@loadable/component 使用 安装 npm install @loadable/component -D # or use yarn yarn add @loadable/component -D 如何在路由中使用? 在src/router/inde

随机推荐