Inverted flag doesn't work for a Dropdown inside a Menu

✖ USAGE QUESTIONS → Use these dedicated resources: Docs - http://www.semantic-ui.com Chat - https://gitter.im/Semantic-Org/Semantic-UI SO - https://stackoverflow.com/questions/tagged/semantic-ui?sort=votes

✔ Enhancements → Be specific. Assume backwards compatibility is a necessity. Suggest implementation when possible. ✔ BUGS → ❤❤❤. Keep in mind some bugs may not be immediately fixable due to backwards compatibility or CSS limitations.

DropDown component inside a Menu component should change to DarkMode when inverted flag is set.

i.e. When a DropDown is created inside a Menu component, 'inverted' flag doesn't works.

Steps

Create a dropdown inside a Menu, with 'inverted=true'.

The dropdown color is still white.

const DropdownExamplePointing = () => (
<Menu inverted={true}>
<Menu.Item>Home</Menu.Item>
<Dropdown text='Shopping' pointing className='link item'>
  <Dropdown.Menu>
    <Dropdown.Header>Categories</Dropdown.Header>
    <Dropdown.Item>
      <Dropdown text='Clothing'>
        <Dropdown.Menu inverted={true}>
          <Dropdown.Header>Mens</Dropdown.Header>
          <Dropdown.Item>Shirts</Dropdown.Item>
          <Dropdown.Item>Pants</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Header>Womens</Dropdown.Header>
        </Dropdown.Menu>
      </Dropdown>
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>
</Menu>
)

Any workaround possible ?

Expected Result

The Dropdown color changes to dark.

Actual Result

The Dropdown color is still white.

Version

x.y.z

Testcase

[Fork, update, and replace to show the bug]: https://jsfiddle.net/ca0rovs3/

Semantic-Org / Semantic-UI

Inverted flag doesn't work for a Dropdown inside a Menu #7079