Closed petertodorov closed 3 years ago
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>
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>
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.
Hello again and another question.
The code above will generate the following:
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:All the best,