目錄
擴(kuò)展學(xué)習(xí)資料
行內(nèi)樣式
引入樣式表
CSS Module
@/src/components/common.module.css
@/src/components/listitem.module.css
css管理進(jìn)階
Css管理工具
練習(xí)
擴(kuò)展學(xué)習(xí)資料
| 資料名稱 |
鏈接 |
| css module |
CSS Modules 用法教程 - 阮一峰的網(wǎng)絡(luò)日志? ? ?? |
| 在React中使用css預(yù)編譯 |
https://juejin.im/post/5c3d67066fb9a049f06a8323?? ?? |
| styled ? component |
styled-components |
行內(nèi)樣式
<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
// 基于前端工程化開(kāi)發(fā)的一套解決方案
import style from './listitem.module.css'; // .title { font-size: 22px }
<span className={style.title}>{props.data.name}</span>解決了CSS的一些問(wèn)題： 全局污染? ? 命名混亂? ? 沒(méi)有依賴管理? ? 可以不使用sass、less等第三方庫(kù)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-641814.html
- 不使用選擇器，使用class名定義樣式
- 不層疊class，使用一個(gè)class定義樣式
- 用compose來(lái)組合
@/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管理進(jìn)階
Css管理工具
- Styled-component【js賦能，解決css不具備的一些能力，如：變量循環(huán)，函數(shù)】
- 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 + '個(gè)' : count}`}
</div>練習(xí)
1.將案例的購(gòu)物車列表改為單雙行不同的樣式（例如雙數(shù)行底色為： #ddd）文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-641814.html
{index%2 > 'background: #ddd'}到了這里，關(guān)于步入React前廳 - Css In React的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
