className on Tab not working as expected.

[KalalauEnterprises]

When using the className prop on the Tabs component, the class in placed in the generated <ul> element. But when the className is used on the Tab component, the class is placed on the content <div> instead of the <li> for the Tab.

Why is this? How can I put a className on the generated <li> element? I'm trying to put an icon on the tab label.

<Tabs className="tabs-class"> <Tab className="tab-class"/> </Tabs> Results in:

<ul class="tabs tabs-class"> <li class="tab col"></li> </ul>

and the "tab-class" we wanted to put on the li shows up on the <div> of the tab content.

I expected that "tab-class" will be place on the <li> just like "tabs-class" is placed on the <ul>.

What actually happens is the "tabs-class" is on the <ul> as expected, but the "tab-class" is on a <div> down in the tab content.

Versions

react-materialize: 3.3.4 materialize-css: 1.0.0 react: 16.8.6

Thank you for any insight!!

[Buooy]

Im having the same issue. anyone knows how to resolve this?

[alextrastero]

gonna have a look now

[alextrastero]

One solution would be to make the title prop a node instead of a string, that way you could render like so: <Tab title={<MyCustomTitle />}>Test 1</Tab>

[kamil-homer]

Same issue here. It is not a good solution, but...it works. So my goal was to change the whole tab css.

component.jsx

<Tabs className={styles.tabSwitcher}>
  <Tab active title="Title">
</Tabs>

component.module.css

.tabSwitcher {
    border-bottom: 1px solid #edeff1;
    box-shadow   : 0 0;
}

.tabSwitcher li a {
    color: #55646D !important;
}

.tabSwitcher li a:focus {
    background-color: transparent !important;
}

/* for the indicator */
.tabSwitcher li:last-child {
    background-color: #55646D !important;
}

[alextrastero]

Ok, so what about adding a titleClassName prop? Would that solve it?