React中section标签引入外部CSS不生效仅行内CSS可用如何解决？

问题核心原因 #

你写的stylish.css存在语法错误，原生CSS的属性值不需要加单/双引号，你混淆了React行内样式（JS对象）的写法和CSS语法，非法的CSS规则会被浏览器直接忽略。
修改后的正确CSS代码如下：

.topone {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
}

其他可能的排查方向 #

如果修改CSS语法后仍然不生效，可以按以下顺序排查：

• 确认导入路径正确：如果stylish.css和foo.js不在同级目录，需要调整导入语句的相对路径，例如CSS文件存放在src/css目录下，导入语句要改为import '../css/stylish.css'，路径错误会导致CSS文件没有被加载。
• 排查样式覆盖问题：项目中其他导入的CSS文件如果存在优先级更高的选择器，也会覆盖.topone的规则。可以打开浏览器F12开发者工具，选中对应的section元素，查看样式面板中.topone的规则是否存在、是否被划掉，即可判断是否被其他样式覆盖。
• 确认构建工具配置正确：如果是手动搭建的Webpack项目，需要安装并配置css-loader、style-loader才能正确解析CSS文件；如果使用create-react-app、Next.js等官方脚手架创建的项目，默认已经支持全局CSS导入，无需额外配置。
• 路由跳转不会影响CSS生效：只要foo.js组件可以正常渲染，组件内导入的CSS就会被打包工具处理后注入页面，和路由调用逻辑无关。

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