feat: add data-key-toggle-* class name for customization

Author: pionxzh

docs/pages/how-to/styling.mdx

@@ -69,7 +69,12 @@ Different part of the dom structure will have class names like `data-object-star
 
 This is the list of class names. 🧐
 
+- `data-key`
 - `data-key-pair`
+- `data-key-key`
+- `data-key-colon`
+- `data-key-toggle-expanded`
+- `data-key-toggle-collapsed`
 - `data-type-label`
 - `data-object`
 - `data-object-start`

src/components/DataKeyPair.tsx

@@ -344,6 +344,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
             ? (inspect
                 ? (
                   <ExpandMoreIcon
+                    className='data-key-toggle-expanded'
                     sx={{
                       fontSize: '.8rem',
                       '&:hover': { cursor: 'pointer' }
@@ -352,6 +353,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
                   )
                 : (
                   <ChevronRightIcon
+                    className='data-key-toggle-collapsed'
                     sx={{
                       fontSize: '.8rem',
                       '&:hover': { cursor: 'pointer' }