semantic-ui-react superhero主题Dropdown.Item hover高亮问题求助

这个问题是Superhero主题自带的Dropdown hover样式对比度太差导致的，咱们直接用自定义CSS覆盖默认样式就能搞定，给你两种方案：

方案一：全局覆盖所有Dropdown的hover样式 #

在你的项目里新建一个自定义CSS文件（比如custom-semantic-styles.css），加入下面的代码：

/* 覆盖Dropdown.Item的悬停样式 */
.ui.dropdown .menu .item:hover {
  background-color: #f5f5f5; /* 浅色背景，可根据需求调整 */
  color: #2d3748; /* 深色文字，保证可读性 */
}

然后在你的React入口文件（比如App.js或者index.js）里引入这个CSS文件，要确保它在semantic.superhero.min.css之后引入，这样才能覆盖默认样式：

import 'semantic-ui-css/semantic.superhero.min.css';
import './custom-semantic-styles.css'; // 放在后面

方案二：仅针对特定Dropdown修改 #

如果你不想全局改变所有Dropdown的样式，可以给目标Dropdown添加自定义类名，比如在你的组件代码里修改：

<Dropdown item simple text='Categories' className="light-hover-dropdown">
  <Dropdown.Menu>
    <Dropdown.Item>Electronics</Dropdown.Item>
    <Dropdown.Item>Automotive</Dropdown.Item>
    <Dropdown.Item>Home</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

然后对应的CSS写成：

.ui.dropdown.light-hover-dropdown .menu .item:hover {
  background-color: #e2e8f0; /* 自定义浅色背景 */
  color: #1a202c; /* 清晰的深色文字 */
}

样式调整小建议 #

你可以根据Superhero主题的整体色调，调整background-color和color的取值，比如选用和主题协调的浅色系背景+深色文字，保证悬停时两者有足够的对比度，方便阅读。

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