React项目中Flexbox行内样式生效但CSS文件样式无效的问题咨询

行内样式能生效但外部CSS不生效，通常是这几个原因：

• CSS选择器未正确匹配或被覆盖
  检查App.css里的.container规则，有没有拼写错误，或者被其他优先级更高的选择器（比如带父元素的选择器、ID选择器）覆盖。可以打开浏览器开发者工具，查看这个div元素的样式面板，看.container的display: flex是不是被划掉了，旁边会显示覆盖它的样式来源。

• Form/Display组件的默认样式干扰
  如果这两个组件本身设置了width: 100%或者display: block，就算父容器是flex布局，子元素也会占满整行导致无法并排。可以给这两个组件添加样式，比如：

  .container > * {
    flex: 1; /* 让两个组件平分宽度 */
    /* 或者设置固定宽度，比如 width: 50%; */
  }
  

• CSS文件未正确导入
  确认App.js里有没有导入App.css文件，比如顶部是否有import './App.css';这行代码，没有的话外部样式根本不会加载。

• 浏览器缓存导致样式未更新
  有时候浏览器会缓存旧的CSS文件，修改后的样式没生效。可以按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除缓存。

• CSS模块冲突（如果使用了的话）
  如果你项目里用了CSS Modules，直接写className="container"是无效的，需要改成：

  import styles from './App.css';
  // ...
  <div className={styles.container}>
  

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