import './index.css'

const style={
  'color':'red',
        'font-size':'150px'
}

function App() {
  return (
    
       
行内样式控制
      <h1 style={{
        'color':'red',
        'font-size':'150px'
      }} >asd 
     asd 
     
通过class类名去控制

      我的类名
    
  );
}
export default App;

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

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

新方式动态控制样式

项目跟文件夹下执行命令

npm install classnames

然后再所需文件里引入

import classNames from "classnames";

改写上面那张图

            {/* 高亮类名： active */}
            {
              tabss.map((item,index)=>(
                tabTypeClick(item.text)}
                className={
                  classNames(
                    'nav-item',
                  {active:tabType==item.text},
                  {txtcolor1:tabType==item.text},

                )
                }
                >{item.text}
              ))
            }