diff --git a/packages/sidenav/src/index.tsx b/packages/sidenav/src/index.tsx
index 22d486e3e..911f26bc2 100644
--- a/packages/sidenav/src/index.tsx
+++ b/packages/sidenav/src/index.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx, ThemeProvider, SxStyleProp, Theme } from 'theme-ui'
+import { jsx, ThemeProvider, Theme, ThemeStyles } from 'theme-ui'
 import { MDXProvider, MDXProviderComponents } from '@mdx-js/react'
 import React, {
   useState,
@@ -79,7 +79,7 @@ export const Sidenav = forwardRef<
   {
     open?: boolean
     components?: MDXProviderComponents
-    styles?: Theme['styles']
+    styles?: ThemeStyles
     children: ReactNode
   }
 >(({ open, styles = {}, components = {}, ...props }, ref) => {
diff --git a/packages/theme-ui/src/index.ts b/packages/theme-ui/src/index.ts
index e72a83559..d51cd5104 100644
--- a/packages/theme-ui/src/index.ts
+++ b/packages/theme-ui/src/index.ts
@@ -25,6 +25,7 @@ export {
   ThemeUICSSProperties,
   ThemeUIStyleObject,
   Theme,
+  ThemeStyles,
   TLengthStyledSystem,
   UseThemeFunction,
 } from '@theme-ui/css'