React JS中如何为public文件夹下的HTML文件应用CSS样式

可以直接用src目录下的CSS文件给public文件夹内HTML模板的body标签设置样式，你之前操作不生效是踩了Create React App的路径和构建规则的坑，具体方案如下：

现有代码的问题 #

• 你在public/index.html头部添加的<link rel='stylesheet' href='style.css'/>是无效引用：CRA构建时只会原样保留public目录下的文件，src目录下的style.css会被打包到build目录的静态资源路径下，不会出现在public根路径，这个link标签找不到对应CSS文件
• 如果直接在HTML文件内写<style>标签样式未生效，一般是样式优先级被后续加载的CSS（比如你引入的Bootstrap）覆盖，或者style标签放置位置错误。

可直接使用的实现方式 #

• 方式1：在全局引入的src CSS文件中直接写body样式（最推荐）
  你已经在入口文件src/index.js里全局引入了./style.css，这类在入口引入的CSS是全局生效的，可以直接选中html、body这类根节点，不需要额外配置。直接在src/style.css里添加body样式即可：

/* src/style.css */
body {
  margin: 0;
  padding: 0;
  background: #f5f7fa;
  font-family: sans-serif;
}

操作后记得删掉public/index.html里你手动加的那句错误的style.css引用link标签，避免控制台报404错误。

• 方式2：在public/index.html内直接写内联样式（适合少量固定全局样式）
  如果不想把全局body样式放在src目录下，可以直接在public/index.html的<head>标签内（meta标签之后、title标签附近即可）添加<style>标签写样式：

<!-- public/index.html head标签内部 -->
<style>
body {
  margin: 0;
  background: #ffffff;
}
</style>

如果写完仍不生效，可以先给属性加!important测试，确认是否被其他高优先级样式覆盖。

• 方式3：根据应用状态动态修改body样式
  如果需要根据React组件的状态动态调整body样式，可以直接在组件中操作DOM，比如在App组件中通过useEffect修改：

// src/App.js
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 直接修改行内样式
    document.body.style.backgroundColor = '#f0f2f5';
    // 也可以给body添加类名，类名对应样式写在全局引入的CSS文件中即可
    document.body.classList.add('custom-body');

    // 组件卸载时清理副作用
    return () => {
      document.body.style.backgroundColor = '';
      document.body.classList.remove('custom-body');
    }
  }, []);

  return (
    <div id="root">
      {/* 你的应用业务代码 */}
    </div>
  )
}

export default App;

注意事项 #

• public目录下的资源如果要在HTML模板中直接引用，必须使用%PUBLIC_URL%前缀，且对应文件必须存放在public目录内，src目录下的文件无法通过这种方式引用，构建后会出现路径404问题
• 只要是在src入口文件中全局引入的CSS，都属于全局作用域，可以选中DOM树中任意节点，包括public模板里的html、body、noscript这类标签
• 你项目中引入的Bootstrap默认会给body添加默认样式，如果自定义样式不生效，优先检查选择器优先级问题

内容的提问来源于stack exchange，提问作者user18055852