Framework7 React - Navbar - bgColor not working!

Questions
1 
<Navbar title="My Page" bgColor="red" />

<Navbar
  title="My Page"
  colorTheme="red"
  bgColor="red"
  color="red"
/>

None works!

2

It only worked when I put the following css

.navbar[class*="bg-color-"] {
  --f7-navbar-bg-color: var(--f7-theme-color-bg-color);
}

Anyway,
Is the non-application of the style a bug?

@nolimits4web

3 
<Navbar
  title="My Page"
  backLink="Back"
  className="color-theme-red text-color-red"
/>

colorTheme, bgColor, color => does not exists

4

In fact, the documentation doesn’t exist.

image
image756Ă—873 41.4 KB

However, when looking at the library’s typography they are there and in fact they are inserting the “bg-color-red” and “text-color-red” classes in the navbar’s html (".navbar") as shown in the image below:

image
image671Ă—630 30 KB

5

Even inserting the class the style is not applied. :confused:

Except when I apply this in the global style:

.navbar[class*="bg-color-"] {
  --f7-navbar-bg-color: var(--f7-theme-color-bg-color);
}

As I mentioned previously, it works!

Is it a framework7 bug?

1 Like
6

i see, my mistake (framework7/navbar.jsx at master · framework7io/framework7 · GitHub)

to change navbar-bg:

<Navbar title="My Page" backLink="Back">
  <div class="navbar-bg bg-color-red"></div>
</Navbar>
1 Like
7

At Vue, the same problem is solved by this example

8 
<template>
  <f7-page>
    <f7-navbar title="Page" back-link="Back">
      <template #before-inner>
        <div class="navbar-bg bg-color-primary" />
      </template>
    </f7-navbar>
  </f7-page>
</template>
10

Yes, this option is also working!