How to change BarMenu font color in blazorise?

Question

I want to change the default bar menu font color for example to red ina razor page, but I don't know how to change it. The below code didn't work.

<Bar
  Breakpoint="Breakpoint.Desktop"
  Background="Background.Light"
  ThemeContrast="ThemeContrast.Light
  Class="sticky-top"
  Style="font-size:large; color:red"
> 
  <BarMenu>
    <BarStart>
      <BarItem>
        <BarLink To="#">Home</BarLink>
      </BarItem>
      <BarItem>
        <BarLink To="#">Documentation</BarLink>
      </BarItem>
      <BarItem>
        <BarDropdown>
          <BarDropdownToggle>Dropdown</BarDropdownToggle>
          <BarDropdownMenu>
            <BarDropdownItem>Action</BarDropdownItem>
            <BarDropdownItem>Another action</BarDropdownItem>
          </BarDropdownMenu>
        </BarDropdown>
      </BarItem>
    </BarStart>
    <BarEnd>
      <BarItem>
        <Button Color="Color.Primary">Sign up</Button>
        <Button Color="Color.Secondary">Log in</Button>
      </BarItem>
    </BarEnd>
  </BarMenu>
</Bar>

which css file have to be changed? It doesen't work with internal css style.

Answer 1

You can change the background-color of .bg-light like this:

<style>
    .bg-light {
        background-color: red !important;
    }
</style>