adds separate style for the expandable object fields container

previous version allowed to change container style only with
".basic-element-style > ul {"
like css.

Author: AnyRoad

README.md

@@ -115,6 +115,7 @@ https://anyroad.github.io/react-json-view-lite/
 | Name                    | Type    | Description                                                                                                       |
 | ----------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
 | container               | string  | CSS class name for rendering parent block                                                                         |
+| childFieldsContainer    | string  | CSS class name for rendering parent block of array or object                                                      |
 | basicChildStyle         | string  | CSS class name for property block containing property name and value                                              |
 | collapseIcon            | string  | CSS class name for rendering button collapsing Object and Array nodes. Default content is `▾`.                    |
 | expandIcon              | string  | CSS class name for rendering button expanding Object and Array nodes. Default content is `▸`.                     |

src/DataRenderer.tsx

@@ -17,6 +17,7 @@ export interface StyleProps {
   expandIcon: string;
   collapseIcon: string;
   collapsedContent: string;
+  childFieldsContainer: string;
   noQuotesForStringValues?: boolean;
   quotesForFieldNames?: boolean;
 }
@@ -161,7 +162,7 @@ function ExpandableObject({
       <span className={style.punctuation}>{openBracket}</span>
 
       {expanded ? (
-        <ul id={contentsId} role='group'>
+        <ul id={contentsId} role='group' className={style.childFieldsContainer}>
           {data.map((dataElement, index) => (
             <DataRender
               key={dataElement[0] || index}

src/index.tsx

@@ -12,6 +12,7 @@ export interface Props extends React.AriaAttributes {
 export const defaultStyles: StyleProps = {
   container: styles['container-light'],
   basicChildStyle: styles['basic-element-style'],
+  childFieldsContainer: styles['child-fields-container'],
   label: styles['label-light'],
   clickableLabel: styles['clickable-label-light'],
   nullValue: styles['value-null-light'],
@@ -31,6 +32,7 @@ export const defaultStyles: StyleProps = {
 export const darkStyles: StyleProps = {
   container: styles['container-dark'],
   basicChildStyle: styles['basic-element-style'],
+  childFieldsContainer: styles['child-fields-container'],
   label: styles['label-dark'],
   clickableLabel: styles['clickable-label-dark'],
   nullValue: styles['value-null-dark'],

src/styles.module.css

@@ -53,11 +53,11 @@
 }
 
 .basic-element-style {
-  margin: 0 10px;
-  padding: 0;
+  margin: 0;
+  padding: 0 10px;
 }
 
-.basic-element-style > ul {
+.child-fields-container {
   margin: 0;
   padding: 0;
 }