步入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 |

行内样式

<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'}