diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index ea32355..e551040 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,4 +1,3 @@
 <script>
   window.global = window;
 </script>
-<link rel="stylesheet" href="../theme/base.css">
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 3f5a10d..5e388fd 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react'
+import '../theme/base.css'
 
 const preview: Preview = {
   parameters: {
diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
index 2a58c54..b3a18a3 100644
--- a/src/components/DataKeyPair.tsx
+++ b/src/components/DataKeyPair.tsx
@@ -181,14 +181,10 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
              [setHover, path, nestedIndex])
          }
     >
-      <DataBox
-        component='span'
-        className='data-key'
-        sx={{
-          lineHeight: 1.5,
-          color: keyColor,
-          letterSpacing: 0.5,
-          opacity: 0.8
+      <span
+        className='data-key data-viewer-expand-box'
+        style={{
+          color: keyColor
         }}
         onClick={
           useCallback((event: MouseEvent<HTMLSpanElement>) => {
@@ -238,7 +234,7 @@ export const DataKeyPair: FC<DataKeyPairProps> = (props) => {
         }
         {PreComponent && <PreComponent {...downstreamProps} />}
         {(isHover && expandable && inspect) && actionIcons}
-      </DataBox>
+      </span>
       {
         (editing && editable)
           ? (Editor && <Editor value={tempValue} setValue={setTempValue}/>)
diff --git a/src/components/DataTypeLabel.tsx b/src/components/DataTypeLabel.tsx
index 70bbeb6..27c9dd2 100644
--- a/src/components/DataTypeLabel.tsx
+++ b/src/components/DataTypeLabel.tsx
@@ -15,14 +15,6 @@ export const DataTypeLabel: FC<DataLabelProps> = ({
     return null
   }
   return (
-    <DataBox
-      className='data-type-label'
-      sx={{
-        mx: 0.5,
-        fontSize: '0.7rem',
-        opacity: 0.8,
-        userSelect: 'none'
-      }}
-    >{dataType}</DataBox>
+    <DataBox className='data-type-label data-viewer-data-type-label'>{dataType}</DataBox>
   )
 }
diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx
index c03951a..fbff76a 100644
--- a/src/components/DataTypes/Object.tsx
+++ b/src/components/DataTypes/Object.tsx
@@ -162,13 +162,9 @@ export const ObjectType: FC<DataItemProps<object>> = (props) => {
           const rest = value.length - displayLength
           elements.push(
             <DataBox
-              sx={{
-                cursor: 'pointer',
-                lineHeight: 1.5,
-                color: keyColor,
-                letterSpacing: 0.5,
-                opacity: 0.8,
-                userSelect: 'none'
+              className='data-viewer-object-item'
+              style={{
+                color: keyColor
               }}
               key='last'
               onClick={() => setDisplayLength(length => length * 2)}
@@ -207,13 +203,9 @@ export const ObjectType: FC<DataItemProps<object>> = (props) => {
       const rest = entries.length - displayLength
       elements.push(
         <DataBox
-          sx={{
-            cursor: 'pointer',
-            lineHeight: 1.5,
-            color: keyColor,
-            letterSpacing: 0.5,
-            opacity: 0.8,
-            userSelect: 'none'
+          className='data-viewer-object-item'
+          style={{
+            color: keyColor
           }}
           key='last'
           onClick={() => setDisplayLength(length => length * 2)}
diff --git a/src/components/DataTypes/createEasyType.tsx b/src/components/DataTypes/createEasyType.tsx
index 3ec4911..f4dc3d9 100644
--- a/src/components/DataTypes/createEasyType.tsx
+++ b/src/components/DataTypes/createEasyType.tsx
@@ -26,7 +26,7 @@ export function createEasyType<Value> (
     const onSelect = useJsonViewerStore(store => store.onSelect)
 
     return (
-      <DataBox onClick={() => onSelect?.(props.path, props.value)} sx={{ color }} >
+      <DataBox onClick={() => onSelect?.(props.path, props.value)} style={{ color }} >
         {(displayTypeLabel && storeDisplayDataTypes) && <DataTypeLabel dataType={type}/>}
         <DataBox className={`${type}-value`}>
           <Render value={props.value}/>
diff --git a/src/components/mui/DataBox.tsx b/src/components/mui/DataBox.tsx
index bb51027..7f7199b 100644
--- a/src/components/mui/DataBox.tsx
+++ b/src/components/mui/DataBox.tsx
@@ -1,12 +1,11 @@
-import { Box } from '@mui/material'
 import clsx from 'clsx'
 import type { ComponentProps, FC } from 'react'
 
-type DataBoxProps = ComponentProps<typeof Box>
+// get HTMLDivElement
+type DataBoxProps = ComponentProps<'div'>
 
 export const DataBox: FC<DataBoxProps> = props => (
-  <Box
-    component='div'
+  <div
     {...props}
     className={clsx('data-box', props.className)}
   />
diff --git a/theme/base.css b/theme/base.css
index 2d2dae4..706119a 100644
--- a/theme/base.css
+++ b/theme/base.css
@@ -7,6 +7,27 @@
   padding-left: 0.7rem
 }
 
+.data-viewer-expand-box {
+  line-height: 1.5;
+  opacity: 0.8;
+}
+
+.data-viewer-data-type-label {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  font-size: 0.7rem;
+  opacity: 0.8;
+  user-select: none
+}
+
+.data-viewer-object-item {
+  cursor: pointer;
+  line-height: 1.5rem;
+  letter-spacing: 0.5rem;
+  opacity: 0.8;
+  user-select: none;
+}
+
 .data-viewer-base-icon {
   width: 1em;
   height: 1em;