Vite React+Bootstrap项目中CSS规则仅对img元素不生效求助

1. CSS Modules 使用错误（核心问题） #

你用了CSS Modules（文件名带.module.css），这类CSS文件的类名会被Vite自动做哈希处理，不能直接写className="gameboy-bg"，得把CSS模块导入为对象，通过对象引用处理后的类名：

修改组件代码：

// 将CSS模块导入为对象
import styles from "./GameboyBackground.module.css"
import gameboyImage from "/music-games/assets/gameboy/blue.png"

function GameboyBackground() {
  return (
    <>  
    <div>
        <img
          src={gameboyImage}
          alt="gameboy"
          // 通过styles对象引用类名，驼峰式或方括号写法都可以
          className={styles.gameboyBg} 
          // 或者 className={styles['gameboy-bg']}
        />
      </div>
    </>
  );
}

export default GameboyBackground;

CSS文件无需修改，Vite会自动处理类名映射，这样img.gameboy-bg的样式就能正确作用到DOM元素上。至于html的样式能生效，是因为全局选择器（如html、body）在CSS Modules中不会被哈希，会直接作用到全局。

2. 内联样式语法错误 #

React的style属性接受的是JavaScript对象，不是字符串，你写style="width: 100px"会触发语法错误导致页面崩溃，正确写法是：

<img
  src={gameboyImage}
  alt="gameboy"
  className={styles.gameboyBg}
  style={{ width: '100px' }} // 双大括号：外层是JSX插值，内层是样式对象
/>

3. Bootstrap样式覆盖补充 #

如果后续仍遇到自定义样式被Bootstrap覆盖的情况，可尝试：

• 给自定义样式加更高优先级（尽量少用!important，仅作为兜底方案）
• 调整导入顺序，把自定义CSS放在Bootstrap之后导入
• 写更具体的选择器（如div.wrapper img.gameboy-bg）提升权重

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