setting color on Menu.Item has no effect

[marksdean]

Please see in the code below (sample code from https://react.semantic-ui.com/collections/menu#menu-example-name-prop).

The 'color' property set on the Menu Item ("reviews") does not work (color not set).

---

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class MenuExampleNameProp extends Component {
state = {}

handleItemClick = (e, { name }) => this.setState({ activeItem: name })

render() {
const { activeItem } = this.state

return (
  <Menu>
    <Menu.Item
      name='editorials'
      active={activeItem === 'Editorials'}
      onClick={this.handleItemClick}
    />
    <Menu.Item
      name='reviews'
      color='red'
      active={activeItem === 'Reviews'}
      onClick={this.handleItemClick}
    />
    <Menu.Item
      name='upcomingEvents'
      active={activeItem === 'upcomingEvents'}
      onClick={this.handleItemClick}
    />
  </Menu>
)

}
}

[levithomason]

Color is applied when the items are active, however, the active logic is incorrectly comparing capitalized strings to lowercase strings in this example. Fix is in #1585.

-active={activeItem === 'Editorials'}
+active={activeItem === 'editorials'}

-active={activeItem === 'Reviews'}
+active={activeItem === 'reviews'}

[venkatanarayanan]

@levithomason why is the color applied only when the item is active

[levithomason]

That is just how the default them chose to work. You can customize your own theme to your liking. You might also be looking for an inverted menu, where the menu is a solid color.