diff --git a/src/containers/StyleProvider/index.tsx b/src/containers/StyleProvider/index.tsx
index 93d13710..0942ef84 100644
--- a/src/containers/StyleProvider/index.tsx
+++ b/src/containers/StyleProvider/index.tsx
@@ -1,4 +1,4 @@
-import { StyleUtilsContext } from '@/context/StyleUtilsContext';
+import { EmotionContext } from '@/context/EmotionContext';
 import { createEmotion } from '@/functions';
 import { StylisPlugin } from '@emotion/cache';
 import { Emotion } from '@emotion/css/create-instance';
@@ -36,7 +36,8 @@ export const StyleProvider: FC<StyleProviderProps> = memo(
     ...emotionOptions
   }) => {
     const emotion = useMemo(() => {
-      const defaultSpeedy = process.env.NODE_ENV !== 'development';
+      const defaultSpeedy = process.env.NODE_ENV === 'development';
+
       return createEmotion({
         speedy: speedy ?? defaultSpeedy,
         key: prefix,
@@ -48,10 +49,6 @@ export const StyleProvider: FC<StyleProviderProps> = memo(
       getEmotionInstance?.(emotion);
     }, [emotion]);
 
-    return (
-      <StyleUtilsContext.Provider value={{ css: emotion.css, cx: emotion.cx }}>
-        {children}
-      </StyleUtilsContext.Provider>
-    );
+    return <EmotionContext.Provider value={emotion}>{children}</EmotionContext.Provider>;
   },
 );
diff --git a/src/context/EmotionContext.ts b/src/context/EmotionContext.ts
new file mode 100644
index 00000000..159dcea3
--- /dev/null
+++ b/src/context/EmotionContext.ts
@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+import { emotion, type Emotion } from '@/functions';
+
+export interface CommonStyleUtils {
+  cx: Emotion['cx'];
+  css: Emotion['css'];
+}
+
+export const EmotionContext = createContext<Emotion>(emotion);
diff --git a/src/context/StyleUtilsContext.ts b/src/context/StyleUtilsContext.ts
deleted file mode 100644
index abda3be9..00000000
--- a/src/context/StyleUtilsContext.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { createContext } from 'react';
-
-import { css, cx, type Emotion } from '@/functions';
-
-export interface CommonStyleUtils {
-  cx: Emotion['cx'];
-  css: Emotion['css'];
-}
-
-export const StyleUtilsContext = createContext<CommonStyleUtils>({
-  css,
-  cx,
-});
diff --git a/src/context/index.ts b/src/context/index.ts
index eba1d8c7..2665324c 100644
--- a/src/context/index.ts
+++ b/src/context/index.ts
@@ -1,2 +1,2 @@
-export * from './StyleUtilsContext';
+export * from './EmotionContext';
 export * from './ThemeModeContext';
diff --git a/src/functions/createStyles.ts b/src/functions/createStyles.ts
index aaa59c6b..36181137 100644
--- a/src/functions/createStyles.ts
+++ b/src/functions/createStyles.ts
@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 
 import { CommonStyleUtils } from '@/context';
-import { useTheme } from '@/hooks';
-import { useStyleUtils } from '@/hooks/useStyleUtils';
+import { useEmotion, useTheme } from '@/hooks';
 import {
   FullStylish,
   FullToken,
@@ -52,7 +51,7 @@ export const createStyles =
   ) =>
   (props?: Props): ReturnStyles<Input> => {
     const theme = useTheme();
-    const { css, cx } = useStyleUtils();
+    const { css, cx } = useEmotion();
 
     const styles = useMemo(() => {
       let tempStyles: ReturnStyleToUse<Input>;
diff --git a/src/functions/css.ts b/src/functions/css.ts
index 49adf7ac..6ad7cc05 100644
--- a/src/functions/css.ts
+++ b/src/functions/css.ts
@@ -1,24 +1,11 @@
 import createEmotion from '@emotion/css/create-instance';
 
-const {
-  css,
-  cx,
-  injectGlobal,
-  keyframes,
-  sheet,
-  flush,
-  merge,
-  hydrate,
-  getRegisteredStyles,
-  cache,
-} = createEmotion({
+export const emotion = createEmotion({
   key: 'ant-css',
   speedy: false,
 });
 
-export { type CSSObject } from '@emotion/css';
-export type { Emotion } from '@emotion/css/create-instance';
-export {
+export const {
   css,
   cx,
   injectGlobal,
@@ -28,6 +15,8 @@ export {
   merge,
   hydrate,
   getRegisteredStyles,
-  createEmotion,
   cache,
-};
+} = emotion;
+export { type CSSObject } from '@emotion/css';
+export type { Emotion } from '@emotion/css/create-instance';
+export { createEmotion };
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index ce5a1571..1ac5fd39 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,5 +1,6 @@
 export * from './useAntdStylish';
 export * from './useAntdTheme';
 export * from './useAntdToken';
+export * from './useEmotion';
 export * from './useTheme';
 export * from './useThemeMode';
diff --git a/src/hooks/useEmotion.ts b/src/hooks/useEmotion.ts
new file mode 100644
index 00000000..6153f63a
--- /dev/null
+++ b/src/hooks/useEmotion.ts
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+
+import { EmotionContext } from '@/context';
+import { Emotion } from '../functions';
+
+export const useEmotion = (): Emotion => useContext(EmotionContext);
diff --git a/src/hooks/useStyleUtils.ts b/src/hooks/useStyleUtils.ts
deleted file mode 100644
index 94436224..00000000
--- a/src/hooks/useStyleUtils.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { useContext } from 'react';
-
-import { StyleUtilsContext, type CommonStyleUtils } from '@/context/StyleUtilsContext';
-
-export const useStyleUtils = (): CommonStyleUtils => useContext(StyleUtilsContext);