Does Navbar react component support color properties?

1

In this doc https://framework7.io/react/colors.html seems that all f7 react components support color properties.

I’m trying to change background color of a Navbar, unfortunately without success.
The Navbar component renders to:

<div class="navbar color-blue bg-color-blue">
     <div class="navbar-bg"></div>
     <div class="navbar-inner sliding">
        <div class="title">My Title</div>
    </div>
</div>

The navbar-bg element overrides the css color settings of navbar element.
There is a way to change color using color properties?

2

Adding this to my css fix the problem:

[class*="bg-color-"] {
    --f7-navbar-bg-color: transparent;
}

But i look for a better solution.

3

You can assign variables directly to component via style:

<Navbar style={{ '--f7-navbar-bg-color': 'transparent' }}>...</Navbar>