[pickers] Improve `PickersLayout` styles consistency

[noraleonte]

• [x] I have followed (at least) the PR section of the contributing guide.

I noticed a few styling inconsistencies that were causing issues for customization.

1. the actionBar and shortcuts could not be customized with styleOverrides
2. applying some of the toolbar, actionBar and shortcuts styles in the PickersLayoutRoot by targeting classes was causing some specificity issues => you could only override the grid structure by overriding the PickersLayoutRoot styled entirely.

[mui-bot]

Deploy preview: https://deploy-preview-15008--material-ui-x.netlify.app/

Generated by :no_entry_sign: dangerJS against 019107ccbb66e2f39243f1ac755489b480f2ea4c

[oscar-b]

@noraleonte @flaviendelangle There's another visual inconsistency (divider above actionbar) when using actionBar for <DatePicker/>/<DateRangePicker /> compared to <DateTimePicker/>/<DateTimeRangePicker/>

<DatePicker/>

<DateTimePicker/>

See the <Divider/> in question here: https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePickerLayout.tsx#L53

It's also conditionalised in a way so that if you provider your own <ActionBar/> component via slots, the divider isn't necessarily shown.

[github-actions[bot]]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[oscar-b]

@noraleonte was the fixes merged somewhere else, or abandoned? Should I open a separate issue for the divider inconsistency above?

[noraleonte]

Hey @oscar-b 👋 The fix for the fact that the actionBar and shortcuts could not be customized with styleOverrides was fixed in a different PR. The inconsistency with the divider seems like a separate issue. I think you could open a new issue with a reproduction case, it would be the best 👌 Feel free to reference your comment from this PR 👍 Thanks!