React MDB Pro ignoring color attribute for tabs


Topic: React MDB Pro ignoring color attribute for tabs

les.mahon pro asked 7 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 7 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. "

Jakub Strebeyko staff answered 7 years ago

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
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes