六、内联样式和样式表

（一） src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
// 类重名有可能样式冲突
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

（二） src/index.css

.p1 {
  color: #bfa;
}

（三） src/App.js

import React, { useState } from "react";
// 样式表（适合引入统一的样式，不适合大范围使用，同名样式可能冲突）
import "./App.css";

export default function App() {
  const [redBorder, setRedBorder] = useState(false);

  // 内联样式
  const pStyle = {
    color: "red",
    backgroundColor: "#bfa",
    border: redBorder ? "2px dashed red" : "1px solid blue",
  };

  const clickHandler = () => {
    setRedBorder(!redBorder);
  };

  return (
    <div>
      <p style={pStyle}>我是一个段落</p>
      <p className={`p1 ${redBorder ? "" : "blueBorder"}`}>我是一个段落</p>
      <button onClick={clickHandler}>点我一下</button>
    </div>
  );
}

（四） src/App.css

.p1 {
  color: red;
  background-color: #bfa;
  border: 1px solid red;
}

.blueBorder {
  border: 1px solid blue;
}