内联style
必须是js对象写法,不是字符串
{color:‘green’,fontSize:‘20px’}
驼峰命名不使用连字符
<span style={{color:'blue'}}>未发布</span>}
缺点
内联代码多,性能差,扩展性不好
引入css文件
- 引入css文件
- jsx中使用className(类似html标签中的class)
- 使用clsx或者classnames做条件判断
let itemClassName='list_item';
if(isPublished) itemClassName +=' published';
return(
<div className={itemClassName}>
<strong>{title}</strong>
{/* 显示空格 */}
{/* 条件判断 */}
{isPublished?<span>已发布</span> : <span style={{color:'blue'}}>未发布</span>}
{/* 点击编辑按钮 */}
<button onClick={()=>{edit(id)}}>点击编辑</button>
</div>
)
逻辑稍复杂 — 引入npm 包
查看官网安装下载使用
classnames
const itemClassName=classnames('list_items',{published: isPublished})
clsx
引入css文件存在的问题
当页面中引入多个css文件时,
难免存在样式名重复的情况
造成组件样式达不到预期效果
怎么办
之前的解决方案 BEM规范,软性规定写css样式
使用cssModule
CSS module
- 每个css文件当作单独的模块,命名xxx.module.css
(本质上为每个className 增加后缀名,保证不重复) - 引入
import styles from “./QuestionCard.module.css”; - 使用
styles.xxx
注意有下划线的时候
<div className={styles['list_item']}>
使用sass
css原始语法不能嵌套
使用less或者sass预处理语言
将文件后缀名改为.scss
CSS - in JS
在js中写css样式
一种解决方案,包含好几个工具
类似内联style , 但是没有内联style的问题
(本质上,是自动生成css文件)
styled-components
styled-components: Basics
import {FC} from "react";
import styled from "styled-components";
//组件
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: #BF4F74;
`;
// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
const Demo:FC=()=>{
return (
<>
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
</>
)
}
export default Demo;
styled Jsx
GitHub - vercel/styled-jsx: Full CSS support for JSX without compromises
是用的js,目前项目是ts,不演示了
emotion
Emotion – Introduction