[ButtonBase] Add a "render" prop to the ButtonBase

[goodbomb]

Hi, I don't believe this is a duplicate, but I've found that spreading "extra" props into the component prop is confusing and counter-intuitive (info found here: https://stackoverflow.com/questions/37843495/material-ui-adding-link-component-from-react-router). It would make a lot more sense to allow an actual render prop that can be used to actually render out a component.

For example:

// current implementation for a Tab with a Link

<Tab
    value="tabOne"
    component={Link}
    to={`/orgs/${props.params.orgId}/members`}  // this prop doesn't exist in the docs, but it works
/>

Result from proposed change:

<Tab
    value="tabOne"
    render={<Link to="/my/relative/path" />}
/>

This would make implementation a lot more intuitive.

[oliviertassinari]

There is this pattern that I want to better document: #7956 (comment)
It's also documented here: https://material-ui.com/demos/buttons/#third-party-routing-library.
What do you think of it?

[goodbomb]

Ah, that makes more sense. I was under the impression that the "component" prop could only be passed a reference, not an element. The following example solves my use case:

<Button component={props => <Link to="/open-collective" {...props} />}>
  Link
</Button>

That said, since it applies to everything that extends from ButtonBase, wouldn't it make sense to put that section in ButtonBase instead of Button?

[oliviertassinari]

@goodbomb I agree. I think that we could add a link in the FAQ too.

[goodbomb]

Works for me. Thanks for the prompt responses!