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; }