步入React前厅 - Css In React

目录

扩展学习资料

行内样式

引入样式表

[CSS Module](#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 |

行内样式

html 复制代码
<div style={{fontSize: 18, color: red}}>Content Here</div>

引入样式表

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

CSS Module

html 复制代码
// 基于前端工程化开发的一套解决方案
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

css 复制代码
.common {
  font-size: 16px;
  background-color: aqua;
  text-decoration: underline;
}

@/src/components/listitem.module.css

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】
javascript 复制代码
// 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)

css 复制代码
{index%2 > 'background: #ddd'}
相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
rannn_1117 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go8 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
β添砖java8 小时前
CSS3核心技术
前端·css·css3
猫头虎-前端技术8 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫8 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓8 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java8 小时前
CSS的文本样式
前端·css
前端小趴菜059 小时前
css - 滤镜
前端·css
祈祷苍天赐我java之术9 小时前
理解 CSS 浮动技术
前端·css