如何为Material Icon添加hover效果？CSS Modules下className不生效问题

问题原因分析 #

1. CSS属性缺少单位：代码里的right: 20和top: 20未指定单位（如px），浏览器会忽略这些无效属性，导致定位不生效。
2. 样式优先级冲突：Material UI的SvgIcon组件自带默认样式，可能覆盖自定义样式。
3. 父元素定位缺失：使用position: absolute时，若父容器未设置position: relative，图标会相对于整个文档定位，可能超出可视区域，造成样式未生效的错觉。

解决方案 #

1. 修正CSS属性单位 #

先修复最基础的单位缺失问题：

/* LandingPage.module.css */
.settingsButton {
    position: absolute;
    right: 20px; /* 添加px单位 */
    top: 20px; /* 添加px单位 */
    display: block;
    height: 70px;
    width: 70px;
    transition: transform .7s ease-in-out;
    color: white;
}

.settingsButton:hover {
    transform: rotate(360deg);
}

2. 给父容器设置定位 #

为SettingsIcon的父元素添加position: relative，让图标的绝对定位基于父容器：

// 示例父容器代码
<div style={{ position: 'relative' }}>
  <SettingsIcon className={css.settingsButton} />
</div>

3. 提升样式优先级（若仍不生效） #

如果默认样式覆盖了自定义样式，可通过更明确的规则或强制生效来解决：

/* LandingPage.module.css */
.settingsButton {
    position: absolute;
    right: 20px;
    top: 20px;
    display: block;
    height: 70px;
    width: 70px;
    transition: transform .7s ease-in-out;
    color: white !important; /* 必要时用!important强制生效，尽量避免滥用 */
}

.settingsButton:hover {
    transform: rotate(360deg) !important;
}

4. 结合MUI的sx属性（备选方案） #

如果CSS Modules的样式始终不生效，可直接用MUI的sx属性传递样式：

import SettingsIcon from "@mui/icons-material/Settings";

<SettingsIcon 
  sx={{
    position: 'absolute',
    right: '20px',
    top: '20px',
    height: '70px',
    width: '70px',
    transition: 'transform .7s ease-in-out',
    color: 'white',
    '&:hover': {
      transform: 'rotate(360deg)'
    }
  }} 
/>

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