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

飞飞翼2024-06-11 19:17

复制代码

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>