React MDB Pro ignoring color attribute for tabs

Topic: React MDB Pro ignoring color attribute for tabs

les.mahon pro asked 6 years ago

Hi,

Following the examples here I am trying to get the tabs working. It functions ok when I use the examples and include them in my project but the color attribute seems to be ignored.

this:

<Nav classicTabs color="indigo">

produces working nav with no color styling

this:

<Nav classicTabs className="indigo">

produces an indigo background to the nav element but without the expected styling of the hovver and selected (Indicating that the css is available)

Any indications as to what I am doing wrong?
Thanks
Les

les.mahon pro commented 6 years ago

One other thing I have noticed, the console shows the following error: "Warning: React does not recognize the `classicTabs` prop on a DOM element. "

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there,

Welcome to the Support Board! The main issue here is, if I understand correctly, a lack of color styling on an otherwise perfectly healthy <code><Nav classicTabs></code> component. As the <code>classicTabs</code> props is a new addition to MDB React, what I would suggest first is making sure that the package is up-to-date. Account indicator seems to be saying, though, that you are using the newest version <code>4.2</code>. Is it correct?

The error message mentioned in the comment tells a different story, suggesting that MDB React <code><Nav></code> component is being interpreted as a native DOM <code><nav></code>, therefore not recognizing the <code>`classicTabs`</code> prop. Is there a reason in your code for it to think that (import issue, letter casing perhaps)?

Finally, even though it might seem like a hurdle, I think the easiest way to see what got goofed is experiencing how it works "live", by downloading our package <em>as-is</em>, installing the dependencies (by running <code>yarn</code>) and then a server (<code>yarn start</code>). With an access to our App you can easily inspect how it is done in the code (<code>docs/pages/TabsPage.js</code>) and in the browser (at <code>http://localhost:8080/components/tabs</code>); whether the examples used in our documentation work correctly at your end, for reference, comparison and adjustment.

With Best Regards,
Kuba

Please insert min. 20 characters.

Hi there, Welcome to the Support Board! The main issue here is, if I understand correctly, a lack of color styling on an otherwise perfectly healthy <Nav classicTabs> component. As the classicTabs props is a new addition to MDB React, what I would suggest first is making sure that the package is up-to-date. Account indicator seems to be saying, though, that you are using the newest version 4.2. Is it correct? The error message mentioned in the comment tells a different story, suggesting that MDB React <Nav> component is being interpreted as a native DOM <nav>, therefore not recognizing the `classicTabs` prop. Is there a reason in your code for it to think that (import issue, letter casing perhaps)? Finally, even though it might seem like a hurdle, I think the easiest way to see what got goofed is experiencing how it works "live", by downloading our package as-is, installing the dependencies (by running yarn) and then a server (yarn start). With an access to our App you can easily inspect how it is done in the code (docs/pages/TabsPage.js) and in the browser (at http://localhost:8080/components/tabs); whether the examples used in our documentation work correctly at your end, for reference, comparison and adjustment. With Best Regards, Kuba

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: Yes

les.mahon

Pro User 0Support score
1Questions 0Answers 0Snippets