[HELP] Styling/accessing children of components through prop passed to the parent component

[petertodorov]

In the case of the <Tabs> component we have a <ul> element, that is generated under the hood:

<div class="tabs">
  <ul>
    <li>
      <span>
       ...
      </span>
    </li>
  </ul>
</div>

is there any way to style the <ul> child by using a prop passed to the <Tabs> component ?

This can be also applicable in other cases:

• e.g. in the Dropdown component - is there any way to style the dropdown's child, bearing the class dropdown-trigger or the child, bearing the class drodpown-menu or dropdown-content?

Any ideas, suggestions are more than welcome, Thanks

[kennethnym]

There's currently no direct way to style the underlying <ul> component. You can use CSS selectors to select it from the parent element:

.my-tab > ul {
  /* your style here */
}

then pass the class name to the Tabs component:

<Tabs
  className="my-tab" />

[petertodorov]

@kennethnym thanks for the response, indeed the css is a good solution for this, just wanted to get a confirmation that there is no other direct way to achieve this.

[kennethnym]

I'll transfer this into discussion to clean up the issue section a little bit.