How to customize a component in :next

[rogeliog]

The next branch looks great!

What is the proposed solution for customizing components in the :next branch

For example, if I need the label of a Tab not be uppercase Tab.js#L165, how could I achieve this?

• Would a xxxClassName(as mentioned here) be provided for every customizable item (i.e labelClassName)?
• Would I be able to pass my own classes prop that merges with the bases classes?

Thanks a lot!

[mbrookes]

The answer is in the page you linked to... however there may be some gaps in the API. Looks like you found one. 😄

Feel free to submit that as an issue following the issue template.

PRs welcome! 👍

Also:

Question? This helps us keep issues for... issues. 😄 Thanks!

[rogeliog]

So, just to make sure that I understand it correctly

For example, based on the Tab.js stylesheet does it mean that it will have all this props?

rootClassName
rootLabelIconClassName
rootAccentClassName
rootAccentSelectedClassName
rootAccentDisabledClassName
rootInheritClassName
rootInheritSelectedClassName
rootInheritDisabledClassName
labelClassName

Or would that be customized by passing a classes prop that potentially overrides any of these classes?

root: {
  /* some css */
}
rootLabelIcon: {
  /* some css */
}
rootAccent: {
  /* some css */
}
rootAccentSelected: {
  /* some css */
}
rootAccentDisabled: {
  /* some css */
}
rootInherit: {
  /* some css */
}
rootInheritSelected: {
  /* some css */
}
rootInheritDisabled: {
  /* some css */
}
label: {
  /* some css */
}

[mbrookes]

@rogeliog As it stands, for root, you would build and pass in a set of classes through the className prop based on the same conditions the component uses internally, essentially reproducing https://github.com/callemall/material-ui/blob/next/src/Tabs/Tab.js#L171-L179.

We can't override the stylesheet array with a prop, because it's created and written to the DOM on mount.

What's missing is labelClassName.