superhero active hover menu items color stays dark

[mojave27]

Greetings and thanks for the great themes. I tried out the superhero theme with semantic-ui-react, and it looks awesome. However, there is an issue with the styling of some items, where the font color would be black on a #333 background-color.

I initially noticed it on a Dropdown menu item (the Electronics item is hovered in this image):

The Dropdown is nested in a Menu.

When I viewed the demo of the superhero theme on http://semantic-ui-forest.com/themes/bootswatch/superhero/, the dropdown menu's hovered items had white font.

If I remove the Menu parent component, the Dropdown is styled correctly. I tried a few things, including downgrading semantic-ui from 2.3.1 to 2.2.0, but ultimately just downloaded the semantic.superhero.min.css and replaced the one in my dist/ folder, and it corrected the problem locally.

Using the css from the demo site:

I used create-react-app to initialize my react app. I have the semantic.superhero.min.css file in src/semantic/dist, and I import that into my src/index.js. I'm not applying any other css. Here are my dependencies:

"dependencies": {
   "ajv": "^6.0.0",
   "react": "^15.4.2",
   "react-dom": "^15.4.2",
   "react-router": "^3.0.0",
   "react-scripts": "1.1.4",
   "semantic-ui-react": "^0.80.2"
 },
 "devDependencies": {
   "gulp": "^3.9.1",
   "semantic-ui": "^2.3.1"
 }

I don't know if the problem is related to my build of the css or not. But, if I can track down the root cause, I'll report back.

[xiaohanyu]

Thanks for your report. Will work on it soon.