[HELP] styling of element determined by `renderAs` prop

[petertodorov]

Hello again and another question.

<Tabs>
  <Tabs.Tab renderAs="span" className="has-background-success">
    ...
  </Tabs.Tab>
</Tabs>

The code above will generate the following:

<div class="tabs">
  <ul>
    <li class="has-background-success">
      <span>
        ...
      </span>
    </li>
  </ul>
</div>

I was wondering if there is a way to style the span element (determined by the renderAs prop) based on my needs by adding a prop to the <Tabs.Tab> component?

As you can see the className='has-background-primary' styles the <li> element while I would need a way to achieve this:

<div class="tabs">
  <ul>
    <li class="has-background-success">
      <span class='p-0'>
        ...
      </span>
    </li>
  </ul>
</div>

All the best,

[kennethnym]

Pass in a custom component to renderAs that renders a <span> with custom styles applied:

const MyCustomSpan = ({ children }) => <span className="p-0">{children}</span>

then pass it to renderAs:

<Tabs>
  <Tabs.Tab renderAs={MyCustomSpan} className="has-background-success">
    ...
  </Tabs.Tab>
</Tabs>

[petertodorov]

Hey @kennethnym, thanks for the advice and the example. I did something like this, cause I needed to pass the tabClassName and tabContent as props. Would be glad to hear what you think of it.

    <Tabs.Tab
      renderAs={() => {
        const Tag = getTag(tabRenderAs || renderAs)
          return (
            <MyCustomTab
              tabId={tabId}
              tabClassName={tabClassName}
              tabContent={tabContent}
             />
          )
       }}
    />
  </Tabs.Tab>

[kennethnym]

Just looking at the snippet, I think it's fine. Although I think you should find a way to avoid inlining functions in a huge JSX tree because IMO that hurts readability.