[Dynamic Form] Fix for 1788/1794 and add styles property for support customizing styling (#1913)

* fixed #1788
and add styles/className property to support styling customization, should somehow fix #1794

* Update DynamicForm.md as michaelmaillot suggested

* fixed typo name problem on dynamicForm/DynamicForm.styles.ts

* fixed the typo on dynamicField/DynamicField.styles.ts
fixed the subcomponent styles doesn't work in dynamic field issue

* Update DynamicForm.md to add more description on styles property

* remove the indent in sample code on DynamicForm.md, correct the styling class name

* remove all indent on sample code in DynamicForm.md

* Update DynamicForm.md to add line break before the sample code

Author: wuxiaojun514

docs/documentation/docs/controls/DynamicForm.md

@@ -69,6 +69,8 @@ The `DynamicForm` can be configured with the following properties:
 | customIcons | { [ columnInternalName: string ]: string } | no | Specifies custom icons for the form. The key of this dictionary is the column internal name, the value is the Fluent UI icon name. | 
 | storeLastActiveTab | boolean | no |  When uploading files: Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default - `true` |
 | folderPath | string | no | Server relative or library relative folder to create the item in. This option is only available for document libraries and works only when the contentTypeId is specified and has a base type of type Document or Folder. Defaults to the root folder of the library. |
+| className | string | no | Set CSS Class. |
+| styles | IStyleFunctionOrObject<IDynamicFormStyleProps, [IDynamicFormStyles](#idynamicformstyles-interface)> | no | Styles to apply on control.  See the example [here](#how-to-use-styles-property) |
 
 ## Validation Error Dialog Properties `IValidationErrorDialogProps`
 
@@ -77,3 +79,77 @@ The `DynamicForm` can be configured with the following properties:
 | showDialogOnValidationError | boolean | no       | Specifies if the dialog should be shown on validation error. Default - `false`   |
 | customTitle                 | string  | no       | Specifies a custom title to be shown in the validation dialog. Default - empty   |
 | customMessage               | string  | no       | Specifies a custom message to be shown in the validation dialog. Default - empty |
+
+## IDynamicFormStyles interface
+
+| Property | Type  | Description |
+| ---- | ---- | ---- |
+| root | IStyle | styles for the root element |
+| sectionTitle | IStyle | styles for the **section title** when your list has enabled [list formatting on form layout](https://learn.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration#configure-custom-body-with-one-or-more-sections) |
+| sectionFormFields | IStyle | styles for the **section container** when your list has enabled list formatting on form layout |
+| sectionFormField | IStyle | styles for the **section field** when your list has enabled list formatting on form layout |
+| sectionLine | IStyle | styles for the **section line break** when your list has enabled list formatting on form layout |
+| header | IStyle | styles for the **header** when your list has enabled list formatting on [custom header](https://learn.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration#configure-custom-header) |
+| footer | IStyle | styles for the **footer** when your list has enabled list formatting on [custom footer](https://learn.microsoft.com/sharepoint/dev/declarative-customization/list-form-configuration#configure-custom-footer) |
+| validationErrorDialog | IStyle | styles for the **content** element in Validation Error Dialog  |
+| actions | IStyle | styles for the **actions** element in Validation Error Dialog  |
+| actionsRight | IStyle | styles for the **button container** of Validation Error Dialog  |
+| action | IStyle | styles for the **close button** in Validation Error Dialog  |
+| buttons | IStyle | styles for the buttons (save button/cancel button)  |
+| subComponentStyles | {fieldStyles: [IDynamicFieldStyles](#idynamicfieldstyles-interface)} | styles of dynamic field control|
+
+## IDynamicFieldStyles interface
+
+| Property | Type  | Description |
+| ---- | ---- | ---- |
+| fieldEditor | IStyle |  styles for root element |
+| fieldContainer | IStyle | styles for container element under root  |
+| titleContainer | IStyle | styles for the title container element of the field |
+| fieldIcon | IStyle | styles for the icon element of the field |
+| fieldDisplay | IStyle | styles for sub field control.e.g. TextField,ListItemPicker  |
+| fieldDisplayNoPadding | IStyle | styles for "Url" field control  |
+| fieldDescription | IStyle | styles for field description element  |
+| fieldRequired | IStyle | styles for required element |
+| fieldLabel | IStyle | styles for field label element , it will append fieldRequired style if the field is required |
+| labelContainer | IStyle | styles for field label container element |
+| pickersContainer | IStyle | styles for those picker sub control,e.g. DatePicker,TaxonomyPicker |
+| errormessage | IStyle | styles for errormessage element |
+| richText | IStyle | styles for richText sub control |
+| thumbnailFieldButtons | IStyle | styles for button when field type is 'Thumbnail' |
+| selectedFileContainer | IStyle | styles for File Selection Control |
+
+## How to use styles property
+
+Property styles of Dynamic Form gives you a set of properties which you can use to modify styles.
+In this example it shows 4 columns (by default it shows 3 columns per row) in one row if screen size is bigger than 1280px (it requires enable list formatting first)
+and make the error message font size a bit large.
+
+```TypeScript
+styles={{
+  sectionFormField: {
+    selectors: {
+      ':has(div)': {
+        [`@media (min-width: 1280px)`]: {
+          "min-width": '21%',
+          "max-width": '21%' //force show 4 columns per row in big screen size when enabled list custom formatting
+        }
+      },
+    },
+  },
+
+  subComponentStyles: {
+    fieldStyles: {
+      errormessage: {
+        "font-size": "18px" //overwrite the error message font size in Dynamic Field for Lookup/Note/Date fields (The error message element is generated directly in Dynamic Field control)
+      },
+      fieldDisplay: {
+        selectors: {
+          '.ms-TextField-errorMessage': {
+            "font-size": "18px !important" //overwrite the error message font size in Dynamic Field for TextField (error message element is wrapped in Fluent UI TextField control, we cannot modify it directly,we have to use 'selectors' to change it)
+          }
+        }
+      }
+    }
+  }
+}}
+```