步入React前厅 - Css In React

目录

扩展学习资料

行内样式

引入样式表

CSS Module

@/src/components/common.module.css

@/src/components/listitem.module.css

css管理进阶

Css管理工具

练习


扩展学习资料

资料名称

链接

css module

CSS Modules 用法教程 - 阮一峰的网络日志      

在React中使用css预编译

https://juejin.im/post/5c3d67066fb9a049f06a8323     

styled   component

styled-components

行内样式

<div style={{fontSize: 18, color: red}}>Content Here</div>

引入样式表

import './listitem.css'; // .title { font-size: 22px } // 全局样式,其他组件也可以使用
<span className='title'>{props.data.name}</span>

CSS Module

// 基于前端工程化开发的一套解决方案
import style from './listitem.module.css'; // .title { font-size: 22px } 
<span className={style.title}>{props.data.name}</span>

解决了CSS的一些问题: 全局污染    命名混乱    没有依赖管理    可以不使用sass、less等第三方库

  • 不使用选择器,使用class名定义样式
  • 不层叠class,使用一个class定义样式
  • 用compose来组合

@/src/components/common.module.css

.common {font-size: 16px;background-color: aqua;text-decoration: underline;
}

@/src/components/listitem.module.css

.common {text-decoration: underline;text-indent: 2em;display: block;
}
.title {/* composes: common; */composes: common from 'common.module.css';font-size: 20px;font-weight: bold;color: #710000;
}

css管理进阶

Css管理工具

  • Styled-component【js赋能,解决css不具备的一些能力,如:变量循环,函数】
  • Classnames【更方便的使用cssModule】
// npm install classnames --save
import classnames from 'classnames/bind';
const cls = classnames.bind(style);
<span className={style.title}>{props.data.name}</span>
// =>
<span className={cls('title', 'price-tag2')}>¥{props.data.price}</span>import cn from 'classnames';
const count = 0;
const _cn = cn({'themed-grid-col-s': !count,
});
<div className={`col-2 themed-grid-col ` + _cn}>{`${count ? count + '个' : count}`}
</div>

练习

1.将案例的购物车列表改为单双行不同的样式(例如双数行底色为: #ddd)

{index%2 > 'background: #ddd'}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/32205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Myatis和MybatisPlus常见分页方式

Myatis和MybatisPlus常见分页方式 一、mybaits 原生limit分页 SELECT * FROM order_info limit #{pageNow},#{pageSize}分页插件&#xff08;ssm中&#xff0c;通过xml配置分页。springboot通过则通过配置文件&#xff09; PageHelper插件&#xff1a;PageHelper.startPage(…

js的转变

今天闲着没事在chat上面搜了一下js的转变大家看看&#xff0c;不喜勿喷 1. 起源和简单脚本语言 JavaScript诞生于上世纪90年代早期&#xff0c;最初作为一种简单的脚本语言用于网页浏览器中&#xff0c;主要用于添加动态效果和交互。当时&#xff0c;它的用途局限&#xff0c…

【图像去噪的滤波器】非局部均值滤波器的实现,用于鲁棒的图像去噪研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果

flutter开发实战-实现marquee文本跑马灯效果 最近开发过程中需要marquee文本跑马灯效果&#xff0c;这里使用到了flutter的插件marquee 效果图如下 一、marquee 1.1 引入marquee 在pubspec.yaml中引入marquee # 跑马灯效果marquee: ^2.2.31.2 marquee使用 marquee使用也是…

想要延长Macbook寿命?这六个保养技巧你必须get!

Mac作为我们工作生活的伙伴&#xff0c;重要性不需要多说。但在使用的过程中&#xff0c;我们总会因不当操作导致Mac出现各种问题。 要想它长久的陪伴&#xff0c;平时的维护与保养自然不能少&#xff0c;Mac的保养很重要的两点就是硬件保养和电脑系统保养&#xff0c;硬件保养…

使用 POI 在 Word 中重新开始编号、自定义标题格式

效果图 引入依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.2</version></dependency><!-- https…

SpringCloud整体架构概览

什么是SpringCloud 目标 协调任何服务&#xff0c;简化分布式系统开发。 简介 构建分布式系统不应该是复杂的&#xff0c;SpringCloud对常见的分布式系统模式提供了简单易用的编程模型&#xff0c;帮助开发者构建弹性、可靠、协调的应用程序。SpringCloud是在SpringBoot的基…

Unity游戏源码分享-儿童益智数学大脑训练游戏

Unity游戏源码分享-儿童益智数学大脑训练游戏 5秒内选择答案 项目下载地址&#xff1a;https://download.csdn.net/download/Highning0007/88198773

WebAssembly

WebAssembly&#xff08;简称Wasm&#xff09;是一种面向Web的二进制指令格式&#xff0c;用于在现代Web浏览器中运行高性能的可移植代码。它是一种跨平台、低级别的虚拟机技术&#xff0c;允许开发者将不同编程语言的代码编译成Wasm格式&#xff0c;然后在Web浏览器中运行。 …

信息学奥赛一本通——1267:【例9.11】01背包问题

文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码 题目 【题目描述】 一个旅行者有一个最多能装 M M M 公斤的背包&#xff0c;现在有 n n n 件物品&#xff0c;它们的重量分别是 W 1 &#xff0c; W 2 &#xff0c; . . . , W n W_1&#xff0c…

整理mongodb文档:改

个人博客 整理mongodb文档:改 求关注&#xff0c;求批评&#xff0c;求进步 文章概叙 本文主要讲的是mongodb的updateOne以及updateMany&#xff0c;主要还是在shell下进行操作&#xff0c;也讲解下主要的参数upsert以及更新的参数。 数据准备 本次需要准备的数据不是很多…

web前端面试--递归(斐波那契数列)

web面试题 本人是一个web前端开发工程师&#xff0c;主要是vue框架&#xff0c;整理了一些面试题&#xff0c;今后也会一直更新&#xff0c;有好题目的同学欢迎评论区分享 ;-&#xff09; web面试题专栏&#xff1a;点击此处 文章目录 web面试题定义源码测试示例 之前去笔试&…

电脑连接安卓设备显示offline

The Android is offline. This can be resolved by physically disconnecting and...用USB线连接手机和电脑&#xff0c;打开cmd&#xff0c;输入adb devices -l, adb devices -l结果显示可以识别手机&#xff0c;但是状态为offline 打开另外一个终端&#xff0c;输入 adb k…

Spring Boot集成Mybatis Plus通过Pagehelper实现分页查询

文章目录 0 简要说明Pagehelper1 搭建环境1.1 项目目录1.2 项目搭建需要的依赖1.3 配置分页插件拦截器1.4 源代码启动类实体类数据层xml映射文件业务层业务层实现类控制层接口配置swagger请求体 2 可能出现的疑问或者问题2.1 关于total属性疑问2.2 分页不生效问题 3 案例说明3.…

解决Centos/Linux操作系统安装 uWSGI项目报错

解决linux 操作系统编译uWSGI源码报错 最近在学习在Linux操作系统中使用uWSGI项目部署django项目,在使用源码安装uWSGI项目的时候报错。 报错如下&#xff1a; In file included from plugins/python/python_plugin.c:1:0: plugins/python/uwsgi_python.h:4:20: 致命错误&…

7款轻量级平面图设计软件推荐

平面图设计的痕迹体现在日常生活的方方面面&#xff0c;如路边传单、杂志、产品包装袋或手机开屏海报等&#xff0c;平面设计软件层出不穷。Photoshop是大多数平面图设计初学者的入门软件&#xff0c;但随着设计师需求的不断提高&#xff0c;平面图设计软件Photoshop逐渐显示出…

2023 java web面试秘籍

目录 第一章&#xff1a;Java Web基础知识1.介绍3.Java Web基本概念 4.常见面试问题第二章&#xff1a;Java Web核心概念和技术1.介绍3.Servlet和JSP4.Web安全5.常见面试问题 第三章&#xff1a;Java Web高级概念和技术1.介绍3.Spring框架4.安全性5.常见面试问题 第四章&#x…

第十篇-Tesla P40+FastChat+Vicuna-13B-V1.5

部署环境 系统&#xff1a;CentOS-7 CPU: 14C28T 显卡&#xff1a;Tesla P40 24G 驱动: 515 CUDA: 11.7 cuDNN: 8.9.2.26下载模型 https://huggingface.co/lmsys/vicuna-13b-v1.5一个一个下载&#xff0c;26文件下载比较耗时 创建运行环境 conda create --name fastchat py…

React Native连接Zebra斑马打印机通过发送CPCL指令打印(Android 和 iOS通用)

自 2015 年发布以来&#xff0c;React Native 已成为用于构建数千个移动应用程序的流行跨平台移动开发框架之一。通常&#xff0c;我们有开发人员询问如何将 Link-OS SDK 与 React Native 应用程序集成&#xff0c;以便在 Zebra 打印机上打印标签。在本教程中&#xff0c;我们将…

1038:苹果和虫子

【题目描述】 你买了一箱n个苹果&#xff0c;很不幸的是买完时箱子里混进了一条虫子。虫子每x小时能吃掉一个苹果&#xff0c;假设虫子在吃完一个苹果之前不会吃另一个&#xff0c;那么经过y小时你还有多少个完整的苹果&#xff1f; 【输入】 输入仅一行&#xff0c;包括n&a…