脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react 书写CSS

如何用react优雅的书写CSS

 更新时间：2021年04月16日 08:34:19   作者：ws_qy  
这篇文章主要介绍了如何用react优雅的书写CSS，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下

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的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 基于React的状态管理实现一个简单的颜色转换器

    基于React的状态管理实现一个简单的颜色转换器

    这篇文章主要介绍了用React的状态管理,简简单单实现一个颜色转换器,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-08-08
  • React Fiber源码深入分析

    React Fiber源码深入分析

    Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下
    2022-11-11
  • Native Memory Tracking追踪区域示例分析

    Native Memory Tracking追踪区域示例分析

    这篇文章主要为大家介绍了Native Memory Tracking追踪区域示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • React SSR样式及SEO的实践

    React SSR样式及SEO的实践

    这篇文章主要介绍了React SSR样式及SEO的实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 浅谈箭头函数写法在ReactJs中的使用

    浅谈箭头函数写法在ReactJs中的使用

    这篇文章主要介绍了浅谈箭头函数写法在ReactJs中的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • React拆分窗格组件的两种方法

    React拆分窗格组件的两种方法

    这篇文章主要介绍了React拆分窗格组件的两种方法,使用第三方库react-split-pane适用于快速实现拆分窗格功能，并且对功能和样式的要求较为简单的场景，本文结合示例代码介绍的非常详细，需要的朋友可以参考下
    2023-07-07
  • 详解React Native与IOS端之间的交互

    详解React Native与IOS端之间的交互

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。本文将介绍React Native与IOS端之间的交互。
    2021-06-06
  • 基于PixiJS实现react图标旋转动效

    基于PixiJS实现react图标旋转动效

    PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能，这篇文章主要介绍了用PixiJS实现react图标旋转动效,需要的朋友可以参考下
    2022-05-05
  • React 性能优化之非必要的渲染问题解决

    React 性能优化之非必要的渲染问题解决

    本文主要介绍了React 性能优化之非必要的渲染问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • React中常见的动画实现的几种方式

    React中常见的动画实现的几种方式

    本篇文章主要介绍了React中常见的动画实现的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论