React05 样式控制 classnames工具优化类名控制

---

样式控制

1. 行内样式控制

//定义样式
const style = {color: 'red',fontSize: '30px'
}function App() {return (<div className="App">{/* 行内样式控制 */}<p style={style}>Hello BLU!</p></div>);
}
export default App;

2. 外部样式控制

• App.js

//导入外部样式
import './index.css';function App() {const clickHandler = (name) => {alert("Hello " + name);}return (<div className="App">{/* class类名样式控制 */}<button className='bluBtn' onClick={() => clickHandler('BLU')}>Click Me</button></div>);
}
export default App;

• index.css

.bluBtn {color: red;font-size: 20px;font-weight: 600;
}

classnames工具优化类名控制

• npm 安装依赖

npm install classnames

• Tab 组件

//导入外部样式
import './index.css';
//引入依赖
import classNames from 'classnames';
//引入useState
import { useState } from 'react';function Tab() {const [type, setType] = useState('');const handleTabClick = (name) => {setType(name);}return (<div><button className={classNames('bluBtn', {active: type === 'A'})} onClick={() => handleTabClick('A')}>Tab A</button><button className={classNames('bluBtn', {active: type === 'B'})} onClick={() => handleTabClick('B')}>Tab B</button></div>);}
export default Tab;

• index.css

.bluBtn {color: red;font-size: 20px;font-weight: 600;
}
.bluBtn.active {background-color: bisque;
}

• App.js

import Tab from "./Tab";function App() {return (<div className="App"><Tab></Tab>      </div>);
}
export default App;