五、【react】组件基础样式方案

1、行内样式（不推荐）

<h1 style={{color: "red"}}>Welcome to React</h1>

const myStyle = {
  color : 'green',
  size : '18px'
}
function App() {
  return (
    <div className="App">
      <h1 style={myStyle}>Welcome to React</h1>
    </div>
  );
}
export default App;

2、类样式
className

.foo{
    color: blue;
}

import './App.css'

function App() {
  return (
    <div className="App">
      <h1 className='foo'>Welcome to React</h1>
    </div>
  );
}
export default App;

classnames样式对象控制工具

npm install classnames --save

MyApp.tsx

import classNames from "classnames"
import "./MyApp.css"
import { useState } from "react"

function MyApp() {
  const [flag,setFlag] = useState(true)
  const classes = classNames({"my-b": flag, "my-r":!flag})
  const changeColor = () =>{
    console.log("flag changed to",!flag)
    setFlag(!flag)

  }
  return (
    <div className={classes}>
      <h1>Hello World</h1>
      <button onClick={changeColor}>check me</button>
    </div>
  )
}

export default MyApp

MyApp.css

.my-b{
  color: blue;

}
.my-r{
  color: red;
}