fix(DatePicker): readOnlyTextField styles should win over default TextField's

[sopranopillow]

Previous Behavior

The TextField's classname has the same specificity as the user provided readOnlyTextField classname. This causes the values of readOnlyTextField classname to be overriden.

New Behavior

Merge the default TextField styles and the provided styles so the provided styles win over the default ones.

Related Issue(s)

• Fixes [Bug]: DatePicker does not respect passed in styles for readOnlyTextField #27926

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 29a81b8:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 669c13cc90c399d2e0e727be721f868c6c6e2932}

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-DatePicker	178.325 kB	178.329 kB	4 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: 669c13cc90c399d2e0e727be721f868c6c6e2932 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
BaseButton	mount	628	620	5000
Breadcrumb	mount	1686	1686	1000
Checkbox	mount	1646	1702	5000
CheckboxBase	mount	1466	1506	5000
ChoiceGroup	mount	2896	2875	5000
ComboBox	mount	668	639	1000
CommandBar	mount	6214	6290	1000
ContextualMenu	mount	13504	14818	1000
DefaultButton	mount	738	738	5000
DetailsRow	mount	2137	2168	5000
DetailsRowFast	mount	2167	2171	5000
DetailsRowNoStyles	mount	1996	1998	5000
Dialog	mount	2624	2648	1000
DocumentCardTitle	mount	234	235	1000
Dropdown	mount	1956	1982	5000
FocusTrapZone	mount	1134	1143	5000
FocusZone	mount	1038	1064	5000
GroupedList	mount	41353	41525	2
GroupedList	virtual-rerender	19730	19673	2
GroupedList	virtual-rerender-with-unmount	50168	50125	2
GroupedListV2	mount	232	216	2
GroupedListV2	virtual-rerender	225	216	2
GroupedListV2	virtual-rerender-with-unmount	230	228	2
IconButton	mount	1089	1094	5000
Label	mount	343	344	5000
Layer	mount	2697	2695	5000
Link	mount	375	389	5000
MenuButton	mount	932	897	5000
MessageBar	mount	21397	21386	5000
Nav	mount	1934	1912	1000
OverflowSet	mount	783	752	5000
Panel	mount	2055	1780	1000
Persona	mount	708	734	1000
Pivot	mount	861	876	1000
PrimaryButton	mount	849	831	5000
Rating	mount	4595	4651	5000
SearchBox	mount	907	897	5000
Shimmer	mount	1828	1926	5000
Slider	mount	1300	1317	5000
SpinButton	mount	2829	2829	5000
Spinner	mount	382	388	5000
SplitButton	mount	1817	1788	5000
Stack	mount	410	405	5000
StackWithIntrinsicChildren	mount	849	867	5000
StackWithTextChildren	mount	2597	2563	5000
SwatchColorPicker	mount	6130	6104	5000
TagPicker	mount	1422	1412	5000
Text	mount	369	378	5000
TextField	mount	915	912	5000
ThemeProvider	mount	845	839	5000
ThemeProvider	virtual-rerender	577	592	5000
ThemeProvider	virtual-rerender-with-unmount	1272	1250	5000
Toggle	mount	594	611	5000
buttonNative	mount	199	199	5000