diff --git a/rollup.config.ts b/rollup.config.ts
index a49f3c0f..87424d28 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -28,6 +28,7 @@ const external = [
   '@emotion/react/jsx-dev-runtime',
   '@mui/material',
   '@mui/material/styles',
+  /@mui\/material\/.*/,
   'copy-to-clipboard',
   'zustand',
   'zustand/context',
@@ -47,7 +48,9 @@ const outputMatrix = (
     format,
     banner: `/// <reference types="./${baseName}.d.ts" />`,
     globals: external.reduce((object, module) => {
-      object[module] = module
+      if (typeof module === 'string') {
+        object[module] = module
+      }
       return object
     }, {} as Record<string, string>)
   }))
@@ -124,7 +127,7 @@ const dtsMatrix = (): RollupOptions[] => {
 
 const build: RollupOptions[] = [
   buildMatrix('./src/index.tsx', 'index', {
-    format: ['es', 'umd'],
+    format: ['es', 'cjs'],
     browser: false,
     dts: true
   }),
diff --git a/src/components/DataKeyPair.tsx b/src/components/DataKeyPair.tsx
index a6ce9ebf..390fc8b0 100644
--- a/src/components/DataKeyPair.tsx
+++ b/src/components/DataKeyPair.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import Box from '@mui/material/Box'
 import type { ComponentProps } from 'react'
 import React, { useCallback, useMemo, useState } from 'react'
 
diff --git a/src/components/DataTypes/Function.tsx b/src/components/DataTypes/Function.tsx
index e199339e..fd6c720c 100644
--- a/src/components/DataTypes/Function.tsx
+++ b/src/components/DataTypes/Function.tsx
@@ -2,7 +2,8 @@
  * Use NoSsr on function value.
  *  Because in Next.js SSR, the function will be translated to other type
  */
-import { Box, NoSsr } from '@mui/material'
+import Box from '@mui/material/Box'
+import NoSsr from '@mui/material/NoSsr'
 import React from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
diff --git a/src/components/DataTypes/Object.tsx b/src/components/DataTypes/Object.tsx
index fe137d07..50ff759a 100644
--- a/src/components/DataTypes/Object.tsx
+++ b/src/components/DataTypes/Object.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import Box from '@mui/material/Box'
 import React, { useMemo, useState } from 'react'
 
 import { useTextColor } from '../../hooks/useColor'
diff --git a/src/components/DataTypes/createEasyType.tsx b/src/components/DataTypes/createEasyType.tsx
index bcdb3aa9..da3d18c8 100644
--- a/src/components/DataTypes/createEasyType.tsx
+++ b/src/components/DataTypes/createEasyType.tsx
@@ -1,4 +1,4 @@
-import { InputBase } from '@mui/material'
+import InputBase from '@mui/material/InputBase'
 import React, { useCallback } from 'react'
 
 import { useJsonViewerStore } from '../../stores/JsonViewerStore'
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 7bb76e93..40ac4a99 100644
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@@ -1,5 +1,5 @@
 import type { SvgIconProps } from '@mui/material'
-import { SvgIcon } from '@mui/material'
+import SvgIcon from '@mui/material/SvgIcon'
 import React from 'react'
 
 const BaseIcon: React.FC<SvgIconProps> = ({ d, ...props }) => {
diff --git a/src/components/mui/DataBox.tsx b/src/components/mui/DataBox.tsx
index c944312a..39d6dd4c 100644
--- a/src/components/mui/DataBox.tsx
+++ b/src/components/mui/DataBox.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import Box from '@mui/material/Box'
 import type { ComponentProps } from 'react'
 import React from 'react'
 
diff --git a/src/index.tsx b/src/index.tsx
index a95a4078..ad7b6b65 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,6 @@
-import {
-  createTheme, Paper,
-  ThemeProvider
-} from '@mui/material'
+import Paper from '@mui/material/Paper'
+import createTheme from '@mui/material/styles/createTheme'
+import ThemeProvider from '@mui/material/styles/ThemeProvider'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { DataKeyPair } from './components/DataKeyPair'
diff --git a/src/stores/typeRegistry.tsx b/src/stores/typeRegistry.tsx
index f087f16e..8b782f12 100644
--- a/src/stores/typeRegistry.tsx
+++ b/src/stores/typeRegistry.tsx
@@ -1,6 +1,6 @@
-import { Box } from '@mui/material'
+import Box from '@mui/material/Box'
 import type { SetStateAction } from 'react'
-import React, { memo, useMemo, useState } from 'react'
+import { memo, useMemo, useState } from 'react'
 import create from 'zustand'
 import createStore from 'zustand/context'
 import { combine } from 'zustand/middleware'