fluentui/react ContexualMenu items styling

Question

Im trying to style fluentui/react ContextualMenu component. So far i've been able to achieve the look I want by recursively modifying IContextualMenuProps items prop - define styles for each IContextualMenuItem and repeating process for each submenu item.

import { ContextualMenu, IContextualMenuProps, IContextualMenuItem }  from '@fluentui/react';

export class StyledContextualMenu<IContextualMenuProps, {}>{

  setItemStyle = (items: IContextualMenuItem[])=> {
    return items.map(item => {
        item.itemProps.styles = {...};

        if (item.subMenuProps && item.subMenuProps.items)
          item.subMenuProps.items = this.setItemStyle(item.subMenuProps.items)

        return item;
    })
  }

  render() {
    const { items, ...rest } = this.props;
    return <ContextualMenu {...rest} items={this.setItemsStyle(items)}} />
  }
}

Is there a way to define styles for and it subcomponents at once instead of mutating items prop by adding a styles to each item?

I am trying to use contextualMenu. How did you solve it? I am using class component as well. — Burre Ifort, Jul 04 '22 at 12:41

score 0 · Answer 1 · answered Mar 09 '21 at 22:29

There are many ways to style components in Fluent UI React, and the choice depends on your needs and the Fluent UI flavor you're using. For example check out this page on theming for Fluent UI Northstar.

For a collection of items, I would think that either classes or variables on the main theme are appropriate.

fluentui/react ContexualMenu items styling

1 Answers1