投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. 好文分享

react中使用css的七种方法介绍（附代码）

程序猿 • • 好文分享 • 阅读 0

本篇文章给大家带来的内容是关于react中使用css的七种方法介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

第一种: 在组件中直接使用style

不需要组件从外部引入css文件，直接在组件中书写。

import React, { Component } from "react";const div1 = {  width: "300px",  margin: "30px auto",  backgroundColor: "#44014C",  //驼峰法  minHeight: "200px",  boxSizing: "border-box"};class Test extends Component {  constructor(props, context) {    super(props);  }   render() {    return (     
       
123
       
     
    );  }}export default Test;

注意事项:
1.在正常的css中，比如background-color，box-sizing等属性，在style对象p1中的属性中，必须转换成驼峰法，backgroundColor，boxSizing。而没有连字符的属性，如margin，width等，则在style对象中不变。
2.在正常的css中，css的值不需要用双引好(“”)，如

.App-header {  background-color: #282c34;  min-height: 100vh;  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  font-size: calc(10px + 2vmin);  color: white;}

3.不能直接使用字符串写style,会报错

484027244-5c668bdb49e62_articlex.png

立即学习“前端免费学习笔记（深入）”；

而在react中使用style对象的方式时。值必须用双引号包裹起来。

这种方式的react样式，只作用于当前组件。

第二种: 在组件中引入[name].css文件

需要在当前组件开头使用import引入css文件。

import React, { Component } from "react";import TestChidren from "./TestChidren";import "@/assets/css/index.css";class Test extends Component {  constructor(props, context) {    super(props);  }   render() {    return (      
        
123
        测试子组件的样式      
    );  }}export default Test;

这种方式引入的css样式，会作用于当前组件及其所有后代组件。

第三种: 3、在组件中引入[name].scss文件

react内部已经支持了后缀为scss的文件，所以只需要安装node-sass即可，因为有了node-sass，scss文件才能在node环境上编译成css文件。

>yarn add node-sass

然后编写scss文件

//index.scss.App{  background-color: #282c34;  .header{    min-height: 100vh;    color: white;  }}

关于如何详细的使用sass，请查看sass官网

这种方式引入的css样式，同样会作用于当前组件及其所有后代组件。

第四种: 在组件中引入[name].module.css文件

将css文件作为一个模块引入，这个模块中的所有css，只作用于当前组件。不会影响当前组件的后代组件。

import React, { Component } from "react";import TestChild from "./TestChild";import moduleCss from "./test.module.css";class Test extends Component {  constructor(props, context) {    super(props);  }     render() {    return (     
       
321321
            
    );  }}export default Test;

这种方式可以看做是前面第一种在组件中使用style的升级版。完全将css和组件分离开，又不会影响其他组件。

第五种: 在组件中引入 [name].module.scss文件

类似于第四种，区别是第四种引入css module，而这种是引入 scss module而已。

import React, { Component } from "react";import TestChild from "./TestChild";import moduleCss from "./test.module.scss";class Test extends Component {  constructor(props, context) {    super(props);  }     render() {    return (     
       
321321
            
    );  }}export default Test;

同样这种方式可以看做是前面第一种在组件中使用style的升级版。

第六种: 使用styled-components

需要先安装

>yarn add styled-components

然后创建一个js文件(注意是js文件，不是css文件)

//style.jsimport styled, { createGlobalStyle } from "styled-components";export const SelfLink = styled.p`  height: 50px;  border: 1px solid red;  color: yellow;`;export const SelfButton = styled.p`  height: 150px;  width: 150px;  color: ${props => props.color};  background-image: url(${props => props.src});  background-size: 150px 150px;`;

组件中使用styled-components样式

import React, { Component } from "react";import { SelfLink, SelfButton } from "./style";class Test extends Component {  constructor(props, context) {    super(props);  }     render() {    return (     
       app.js                 SelfButton             
    );  }}export default Test;

这种方式是将整个css样式，和html节点整体合并成一个组件。引入这个组件html和css都有了。
它的好处在于可以随时通过往组件上传入 属性，来动态的改变样式。对于处理变量、媒体查询、伪类等较方便的。

这种方式的css也只对当前组件有效。

具体用法，请查看styled-components官网

第七种: 使用radium

需要先安装

>yarn add radium

然后在react组件中直接引入使用

import React, { Component } from "react";import Radium from 'radium';let styles = {  base: {    color: '#fff',    ':hover': {      background: '#0074d9'    }  },  primary: {    background: '#0074D9'  },  warning: {    background: '#FF4136'  }};class Test extends Component {  constructor(props, context) {    super(props);  }     render() {    return (     
           
    );  }}export default Radium(Test);

对于处理变量、媒体查询、伪类等是不方便的。

使用Radium可以直接处理变量、媒体查询、伪类等，并且可以直接使用js中的数学，连接，正则表达式，条件，函数等。

具体用法请查看radium官网

注意:在export之前，必须用Radium包裹。

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的CSS视频教程栏目！

以上就是react中使用css的七种方法介绍（附代码）的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1614302.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

414.1K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年12月24日 04:10:36
下一篇 2025年12月24日 04:10:56

相关推荐

  • 带你吃透CSS3属性：transition 与 transform

    本篇文章带大家了解下css 中的 transition (过渡) 和 transform (动画) 属性，这两个属性的参数确实比较复杂，它们可以做出 css 的一些基础动画效果，平移，旋转，倾角……等等，这些也是我早期学习 css 的难记易忘之处，今天给大家详细总结出来。 一…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 一文详解CSS3中的Flex布局

    本篇文章带大家了解一下css3中的flex布局，希望对大家有所帮助！ 简介 什么是Flex布局 Flex是Flexible Box 的缩写，也称为弹性盒子布局。 Flex布局组成： flex容器（flex container）flex项（flex items）主轴（main axis）交叉轴（cro…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 【整理总结】这些高级CSS技巧，你会几种？

    本篇文章带你玩转css，分享一些高级css技巧，快来看看你是否都会呀！ 学习目标 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式能够说出常见的布局技巧 精灵图 1. 为什么需要精灵图？ 客户端要访问一个网页时，浏览器会向服务器发送请求，服务器接收到请求后，会…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 手把手教你使用CSS实现酷炫六边形网格背景图

    本篇文章给大家分享不规则图形背景排版高阶技巧，介绍一下如何使用css实现酷炫六边形网格背景图，希望对大家有所帮助！ 今天，收到一个很有意思的提问，如何实现类似如下的背景效果图： 嗯？核心主体是由多个六边形网格叠加形成。 立即学习“前端免费学习笔记（深入）”； 那么我们该如何实现它呢？使用纯 CSS …

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • CSS新特性学习：方向裁切overflow:clip

    本篇文章将介绍一个新特性，从 chrome 90 开始，overflow 新增的一个新特性 — overflow: clip，使用它，轻松的对溢出方向进行控制。 overflow: clip 为何 首先，简单介绍下 overflow: clip 的用法。 overflow: clip: …

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 看看CSS如何利用计数器来实现长按点赞累积动画

    本篇文章给大家分享一个css自定义计数器的使用小技巧，聊聊如何利用它实现长按点赞累积动画，希望对大家有所帮助！ 【推荐学习：css视频教程】 在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下 立即学习“前端免费学习笔记（深入）”； 这个动画有两部分组成，其中这个随机表情的实现可以参考…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 详解用SVG给 favicon 添加标识

    怎么使用svg给 favicon 添加标识？下面本篇文章给大家介绍一下使用 svg 生成带标识的 favicon的方法，希望对大家有所帮助！ 之前做了一个 Chrome 插件，可以根据地址的不同生成不同的图标，这样可以很方便的区分不同的开发环境，效果如下 主要实现过程其实不复杂，首先获取网站 fav…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 巧用CSS实现各种奇形怪状按钮（附代码）

    本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！ 怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？ 本文基于一些高频出现在设计稿中的，使用 css 实现稍微有点难度和技巧性的按钮，讲解使用 css 如何尽可能的实现它们。【推荐学习：…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 巧用CSS3滤镜制作文字快闪切换动画效果！

    本篇文章带大家看看怎么利用css3滤镜实现高级感拉满的文字快闪切换动画效果，希望对大家有所帮助！ 今天偶然看到这样一类很有意思的文字快闪动画： 这类文字快闪切换效果运用得当的话，能比较好的吸引用户的眼球。【推荐学习：css视频教程】 立即学习“前端免费学习笔记（深入）”； 当然，今天并非是想用 CS…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000
  • css3怎么改首字母颜色 好文分享

    css3怎么改首字母颜色

    在css3中，可用“:first-letter”选择器和color属性来修改首字母颜色，语法“元素:first-letter{color:颜色值;}”；“:first-letter”可选中元素的首字母，color可给选中的字母设置文本颜色。 本教程操作环境：windows7系统、CSS3&&…

    程序猿的头像 程序猿
    2025年12月24日
    000

  • 快看！10个不错的CSS实用小技巧（分享）

    本篇文章给大家分享10个不错的css实用小技巧，让前端开发更轻松，快来收藏吧，希望对大家有所帮助！ CSS 大约有两百个属性。很多属性都是相互关联的，理清楚每一个属性细节是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。【推荐学习：css视频教程】 1、 打字效果 立即学…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 原来利用纯CSS也能实现文字轮播与图片轮播！

    怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯css也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！ 今天，分享一个实际业务中能够用得上的动画技巧。【推荐学习：css视频教程】 巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样： 立即学习“前端…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 一文了解CSS3中的新属性object-view-box

    本篇文章带大家一起深入了解一下css3中的新特性object-view-box属性，聊聊新属性的作用和使用方法，希望对大家有所帮助！ 在开发时，一直希望有一种原生的CSS方式来裁剪图片，并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现，后面解释。 在这篇文章…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • CSS变量是怎么工作的？如何使用内联CSS变量进行布局？

    本篇文章带大家了解一下css变量，聊聊css变量是怎么工作的，并介绍一下如何使用内联css变量，以提高灵巧布局效率，希望对大家有所帮助！ 有些情况下，我需要用一种简单的方法来创建网格布局。 例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。 在本文中，我们一起探索一些用例，并思考如果实…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 深入探究CSS鼠标指针交互效果

    今天，来实现这样一个有意思的交互效果，通过这个交换效果来聊聊前端鼠标指针交互，希望对大家有所帮助！ 将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。【推荐学习：css视频教程】 修改鼠标样式 首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点： 立即学…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000
  • 纯CSS3怎么实现波浪效果？（代码示例） 好文分享

    纯CSS3怎么实现波浪效果？（代码示例）

    纯css3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 svg 和 css 动画制作波浪效果的方法，希望对大家有所帮助！         随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开发必掌握的一个CSS3波浪效…

    程序猿的头像 程序猿
    2025年12月24日
    000

  • CSS3动画实战之：超酷炫的粘性气泡效果

    本篇文章带大家聊聊css3动画，看看怎么使用纯 css 实现超酷炫的粘性气泡效果，希望对大家有所帮助！ 最近，在 CodePen 上看到这样一个非常有意思的效果： 这个效果的核心难点在于气泡的一种特殊融合效果。【推荐学习：css视频教程】 立即学习“前端免费学习笔记（深入）”； 其源代码在：Code…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 聊聊CSS3中的4个逻辑选择器（快速入手）

    本篇文章给大家介绍一下css3中的逻辑选择器，聊聊里面的 4 名成员，希望对大家有所帮助！ 在 CSS 选择器家族中，新增这样一类比较新的选择器 — 逻辑选择器，目前共有 4 名成员： :is:where:not:has 本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • 一文了解CSS3中的新特性 ::target-text 选择器

    本篇文章带大家一起深入了解一下css3中的新特性::target-text 选择器，聊聊该选择器的作用和使用方法，希望对大家有所帮助！ 最近在 MDN 官网看到了一个从未见过的选择器，::target-text。 简单研究了一下，觉得还有点意思，也有点实际用处，现在分享一下。【推荐学习：css视频教…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

  • css3怎么实现字体渐变色

    方法：用background-clip让渐变背景色在文本区域显示，语法“文字元素{background-image:linear-gradient(..);background-clip:text;color:transparent;}”。 本教程操作环境：windows7系统、CSS3&&…

    程序猿的头像 程序猿
    2025年12月24日 • 好文分享
    000

发表回复

登录后才能评论
关注微信