#yyds干货盘点 react笔记之css-Module模块化

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣

核心概念

/*
    *   CSS模块
    *       使用步骤：
    *           1.创建一个xxx.module.css
    *           2.在组件中引入css
    *               import classes from './App.module.css';
    *           3.通过classes来设置类
    *               className={classes.p1}
    *       CSS模块可以动态的设置唯一的class值
    *           App_p1__9v2n6
    * */

app.js

import React, {useState} from 'react';
import classes from './App.module.css';
import A from "./A";

const App = () => {

    /*
    *   CSS模块
    *       使用步骤：
    *           1.创建一个xxx.module.css
    *           2.在组件中引入css
    *               import classes from './App.module.css';
    *           3.通过classes来设置类
    *               className={classes.p1}
    *       CSS模块可以动态的设置唯一的class值
    *           App_p1__9v2n6
    * */

    const [showBorder, setShowBorder] = useState(false);

    const clickHandler = () => {
        setShowBorder(true);
    };


    return (
        <div>
            <A/>
            <p className={`${classes.p1} ${showBorder ? classes.Border : ''}`}>我是一个段落</p>
            <button onClick={clickHandler}>点我一下</button>
        </div>
    );
};

export default App;

大家好 我是歌谣 放弃很容易 坚持一定很酷