React + 项目(从基础到实战) --第四期

内联style

与html标签的额style类似

必须是js对象写法,不是字符串
{color:‘green’,fontSize:‘20px’}
驼峰命名不使用连字符

 <span style={{color:'blue'}}>未发布</span>}

缺点

内联代码多,性能差,扩展性不好

引入css文件

1. 引入css文件
2. jsx中使用className(类似html标签中的class)
3. 使用clsx或者classnames做条件判断

  

    let itemClassName='list_item';

    if(isPublished) itemClassName +=' published';

  
  

    return(

       <div className={itemClassName}>

  

           <strong>{title}</strong>

            {/* 显示空格 */}

            &nbsp;

            {/* 条件判断 */}

            {isPublished?<span>已发布</span> : <span style={{color:'blue'}}>未发布</span>}

            &nbsp;

            {/* 点击编辑按钮 */}

            <button onClick={()=>{edit(id)}}>点击编辑</button>

  

       </div>

    )

逻辑稍复杂 — 引入npm 包

查看官网安装下载使用

classnames

  const itemClassName=classnames('list_items',{published: isPublished})

clsx

引入css文件存在的问题

当页面中引入多个css文件时,
难免存在样式名重复的情况
造成组件样式达不到预期效果

怎么办

之前的解决方案 BEM规范,软性规定写css样式

使用cssModule

CSS module

1. 每个css文件当作单独的模块,命名xxx.module.css
   (本质上为每个className 增加后缀名,保证不重复)
2. 引入
   import styles from “./QuestionCard.module.css”;
3. 使用
   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