How to change menu background color?

[TicTak21]

I have a following template:

<button
  color="primary:contrast"
  ly-button
  appearance="icon"
  [lyMenuTriggerFor]="menu"
>
  <ly-icon
    >notifications<ly-badge bg="accent">{{
      countNotifications
    }}</ly-badge></ly-icon
  >
</button>

<ng-template #menu let-menuRef>
  <ly-menu [ref]="menuRef">
    <a
      [routerLink]="['/notifications', item.id]"
      ly-button
      ly-menu-item
      *ngFor="let item of notifications"
    >
      {{ item.title }}
    </a>
  </ly-menu>
</ng-template>

And I can't change menu background color.

What I already tried:

1. Inline styling

<ly-menu [ref]="menuRef" [style.background]="'red'">...</ly-menu>

Result: strange bug with background

Screen.Recording.2022-02-17.at.12.07.03.mov

2. Ly-paper(as wrapper or attribute)
   Result: nothing changed

3. Global styling via GlobalVariables

export class CustomGlobalVariables implements PartialThemeVariables {
  menu = {
    root: () => lyl`{
      background: red
    }`,
  };
}

Result: same as (1)👆

Solution(?)

There is a <div> inside menu:

and if I change div background via devtools I get a desired background:

[Enlcxx]

Hi, sorry for the delay. There are several ways to do it.

1. Global styling via GlobalVariables or a specific theme

export class CustomGlobalVariables implements PartialThemeVariables {
  menu = {
    root: (__) => lyl `{
      ${__.container} {
        background: blue
      }
    }`,
  };
}

2. Global styling via $global

Adding this style to AppComponent:

...
import { StyleRenderer, lyl, ThemeVariables, ThemeRef } from '@alyle/ui';
import { STYLES as MENU_STYLES } from '@alyle/ui/menu';

const STYLES = (theme: ThemeVariables, ref: ThemeRef) => {
  ref.renderStyleSheet(MENU_STYLES);
  const menu = ref.selectorsOf(MENU_STYLES);
  return {
    $global: lyl `{
      body {
        background-color: ${theme.background.default}
        color: ${theme.text.default}
        font-family: ${theme.typography.fontFamily}
        margin: 0
        direction: ${theme.direction}
      }
      ${menu.container} { <------------- add this 
        background: red
      }
    }`,
    ...
  }
}

3. Style for specific menu

Stackblitz demo
some-component.ts

const STYLES = (_theme: ThemeVariables, ref: ThemeRef) => {
  ref.renderStyleSheet(MENU_STYLES);
  const menu = ref.selectorsOf(MENU_STYLES);
  return {
    menuCustom: () => lyl`{
      ${menu.container} {
        background: red
      }
    }`,
  };
};

<ly-menu [ref]="M" [ngClass]="classes.menuCustom">

[TicTak21]

Thank you!