react笔记之学习之内联样式和样式表

前言

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

app.js

import React, {useState} from 'react';
import './App.css';
 
const App = () => {
 
    const [redBorder, setRedBorder] = useState(true);
 
    // const pStyle = {
    //     color: 'red',
    //     backgroundColor: '#bfa',
    //     border: redBorder ? "red solid 1px" : "blue solid 1px"
    // };
 
    const clickHandler = () => {
        setRedBorder(false);
    };
 
    return (
        <div>
            <p className={`p1 ${redBorder?'':'blueBorder'}`}>我是一个段落</p>
            <button onClick={clickHandler}>点我一下</button>
        </div>
    );
};
 
export default App;
 

app.css

.p1{
    color: red;
    background-color: #bfa;
    border: 1px red solid;
}
 
.blueBorder{
    border: 1px blue solid;
}