Make it possible to override sub components and/or set props on them

[emattias]

I am trying to implement the rsuite MultiCascader component and make use of as much as possible of our own component that use material-ui components.

I was able to make use of our own select toggle component by overriding the toggleComponentClass but for the other parts of the multi cascader it looks like I would have to re-build too much of the rsuite logic to make it worth it.

With the material-ui library you can set props and/or override the component of sub-components of a material-ui component. For example, see the inputProps and inputComponent props on the Input component docs here: https://material-ui.com/api/input/#props

It would be useful if you could override component and send props to the different sub-components of MultiCascader like Checkbox, DropdownMenuItem (which has the labelComponentClass prop, but I cant override it 😅), arrow/caret etc.

[simonguo]

Thanks for the suggestion, this is indeed a good implementation. Follow-up we can consider this approach when designing.

But I still don't recommend using two UI frameworks in one project. If the design style of rsuite does not meet your product requirements, you can customize your UI style by modifying the less variable.

https://github.com/rsuite/rsuite/blob/master/styles/variables.less

[emattias]

But I still don't recommend using two UI frameworks in one project.

We tried to avoid it but your MultiCascader component was the best option we could find! 😅

If the design style of rsuite does not meet your product requirements, you can customize your UI style by modifying the less variable.

This, aswell as adding our of own css is what we are doing but this results in alot of duplication of styling/behaviour logic and it requires us to update both solutions any time one of them change.

Off topic: I would suggest that you switch to some css-in-js solution. The way material-ui does it is by far the best experience I have had when it comes to customizability in a component library (that, together with the subComponentProps and subComponentComponent props api). Maybe I should create a separate issue about this? :)

[simonguo]

The main reason we don't currently consider css-in-js is the implementation of multiple themes.

In some business scenarios, multiple sets of UI-style themes need to be generated.
https://github.com/rsuite/webpack-multiple-themes-compile

But with regard to the support of subComponentProps and subComponentComponent, we will consider it in subsequent designs to make the components more customizable.

[emattias]

The main reason we don't currently consider css-in-js is the implementation of multiple themes.

In some business scenarios, multiple sets of UI-style themes need to be generated.
rsuite/webpack-multiple-themes-compile

Ok, that should be possible with css-in-js also, see: https://material-ui.com/customization/themes/
And I think it can be more powerful and have better dx also, thanks to the styling and js logic not being so separated.

But with regard to the support of subComponentProps and subComponentComponent, we will consider it in subsequent designs to make the components more customizable.

Sound good, thanks for the consideration! :)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.