react 基础样式的控制（行内和className）

本文主要是介绍react 基础样式的控制（行内和className），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

import './index.css'const style={'color':'red','font-size':'150px'
}function App() {return (<div className="App"><h1>行内样式控制</h1><h1 style={{'color':'red','font-size':'150px'}} >asd </h1><span style={style} >asd </span><h1>通过class类名去控制</h1><span className="foo">我的类名</span></div>);
}
export default App;

 className={`nav-item ${tabType==item.text && 'active'}` }

上面代码是  动态控制样式的用与否

新方式动态控制样式

项目跟文件夹下执行命令

npm install classnames

然后再所需文件里引入

import classNames from "classnames";

改写上面那张图

<li className="nav-sort">{/* 高亮类名： active */}{tabss.map((item,index)=>(<span key={item.text}onClick={(e)=>tabTypeClick(item.text)}className={classNames('nav-item',{active:tabType==item.text},{txtcolor1:tabType==item.text},)}>{item.text}</span>))}</li>

这篇关于react 基础样式的控制（行内和className）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---