Material-ui-pickers: Allow components to be styled using classnames

[encodotom]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0-rc.11 |
| material-ui | 1.3.1 |
| React | 16.3.1 |
| Browser | All |
| Platform | All |

Steps to reproduce

1. Try to override the styles of picker components (e.g. https://github.com/dmtrKovalenko/material-ui-pickers/blob/develop/lib/src/DatePicker/Calendar.jsx)
2. Find that these components can only be styled using a MaterialUI theme

Expected behavior

As well as allowing users to style components using themes, material-ui allows users to pass in classnames which can be used to override the styles of components (see https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.d.ts). This is _extremely_ beneficial for stacks which aren't using themes.

Actual behavior

Picker components can only be styled using a MaterialUI theme.

[dmtrKovalenko]

I am actually aware of that because this is such a giant bunch of work.
I am not promise that it will be implemented so any help is totally appreciated

[oliviertassinari]

I see that the components have a name defined: https://github.com/dmtrKovalenko/material-ui-pickers/blob/bdd7c1de801809a7798c55316a250cb9845e5fd2/lib/src/TimePicker/components/Clock.tsx#L172

You should get this feature for free when you upgrade to Material-UI v4.0.0-beta.0. It was implemented in https://github.com/mui-org/material-ui/pull/15140.

[dmtrKovalenko]

@oliviertassinari it will leverage displayName?

[oliviertassinari]

@dmtrKovalenko It uses the style sheet name. This value should already be unique in the theme.overrides scope. We can't rely on the display name in production.

[dmtrKovalenko]

@oliviertassinari ohh, I got what you mean :)
But I suppose this issue is mostly related to providing the prop classnames. But we differently need to create an example which will show how to override styles with global classnames :)

[oliviertassinari]

Rereading the issue description, it seems that people are interested in having an API where they can provide a classes prop to each nested component. Right now, their only option is to use theme.overrides. Tomorrow, they will be able to use the global class name scope. So, my bad. You won't get this feature for free. We still have to manually forward the props.

[anderha]

Any update on this? Would be really great to have a classes prop

[oliviertassinari]

I think that we are good on this one. In v5, we are pushing global class names and the components prop to inject custom styled-components.