diff --git a/stories/components/context-menu.stories.tsx b/stories/components/context-menu.stories.tsx
index 82e2a73e..0713fd4a 100644
--- a/stories/components/context-menu.stories.tsx
+++ b/stories/components/context-menu.stories.tsx
@@ -1,6 +1,5 @@
 /** @jsxImportSource @emotion/react */
 import { ContextMenu, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import type { ReactElement } from 'react';
 
@@ -15,6 +14,15 @@ export default {
   title: 'Components / ContextMenu',
 };
 
+const StyledContextMenu = styled(ContextMenu)`
+  height: 500px;
+  width: 500px;
+  border: 1px solid black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 export function ContextDropdown() {
   const content = (
     <Menu>
@@ -29,19 +37,9 @@ export function ContextDropdown() {
   );
 
   return (
-    <ContextMenu
-      content={content}
-      css={css`
-        height: 500px;
-        width: 500px;
-        border: 1px solid black;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      `}
-    >
+    <StyledContextMenu content={content}>
       <p>Hello, World!</p>
-    </ContextMenu>
+    </StyledContextMenu>
   );
 }