样式控制

// App.js

import "./style/index.css";

function App() {

  return (
    <div className="main">
      Hello world!
    </div>
  );
}

export default App;

/* index.css */

.main{
  color: red,
}

// App.js

function App() {
  return (
    <div>
      <div style={style.divStyle}>红色字体部分</div>
    </div>
  );
}

const style = {
  // 注意css属性使用小驼峰命名
  divStyle: {
    color: 'red',
  }
}

export default App;

import { useState } from "react";
import "./style/index.css";

const [colorRed, setColorRed] = useState(false)

function App() {
  return (
    <div>
      <div className={ colorRed ? "red" : "default" }>红色字体部分</div>
    </div>
  );
  // 如果有多个类名:
  return (
    <div>
      <div className={ `default ${ colorRed ? "red" : "blue" } ` }>红色字体部分</div>
    </div>
  );
}

export default App;

npm install classnames
# 或者使用yarn
yarn add classnames

import { useState } from "react";
import classNames from "classnames";
import "./style/index.css";

const [colorRed, setColorRed] = useState(false)

function App() {
  return (
    <div>
      <div className={ classNames("default", { colorRed ? "red" : "blue" }) }>红色字体部分</div>
    </div>
  );
}

export default App;