[DatePicker] DatePicker and TimePicker render differently

[grzegorzjudas]

Consider following snippet:

<div className={styles.formRow}>
    <TextField label="Input" className={styles.textFieldShort} />
    <DatePicker label="Date" className={styles.textFieldShort} />
    <TimePicker label="Time" className={styles.textFieldShort} />
</div>

and styles:

.formRow {
    display: flex;
}

.textFieldShort {
    flex: 1;
}

this is how it renders:

after checking why, the reason seems to be, that TimePicker is wrapped with <div> element and the classes added to it are actually added to this <div>'s child , not the <div> itself, while in DatePicker, those are added to the most outer element in render():

TimePicker:

return (
    <div style={prepareStyles(Object.assign({}, style))}>
        ...
    </div>
);

DatePicker:

return (
    <div className={className} style={prepareStyles(Object.assign({}, style))}>
        ...
    </div>
);

This results in the <div> getting the flex behaviour in case of TimePicker, not the element with all styling like in case of DatePicker:

Versions

• Material-UI: 0.18.3
• React: 15.6.1
• Browser: Google Chrome 60.0.3112.90

[grzegorzjudas]

Workaround: use styles instead of className for TimePicker, as those are appended to the outer <div>.

[oliviertassinari]

Closing for #4787