feat(theme-ui): Add sx prop to BaseStyles component

packages/theme-ui/src/index.ts

@@ -1,4 +1,8 @@
-import { jsx as coreJsx, ThemeUIJSX } from '@theme-ui/core'
+import {
+  jsx as coreJsx,
+  ThemeUIJSX,
+  type ThemeUIStyleObject,
+} from '@theme-ui/core'
 export {
   __ThemeUIContext,
   merge,
@@ -29,14 +33,17 @@ export { ThemeProvider } from '@theme-ui/theme-provider'
 export * from '@theme-ui/components'
 export { css, get } from '@theme-ui/css'
 
-export const BaseStyles = (props: Record<string, unknown>) =>
+export const BaseStyles = (
+  props: Record<string, unknown> & { sx?: ThemeUIStyleObject }
+) =>
   jsx('div', {
     ...props,
     sx: {
       fontFamily: 'body',
       lineHeight: 'body',
       fontWeight: 'body',
       variant: 'styles',
+      ...props.sx,
     },
   })
 
@@ -50,10 +57,8 @@ export declare namespace jsx {
       extends ThemeUIJSX.ElementAttributesProperty {}
     export interface ElementChildrenAttribute
       extends ThemeUIJSX.ElementChildrenAttribute {}
-    export type LibraryManagedAttributes<
-      C,
-      P
-    > = ThemeUIJSX.LibraryManagedAttributes<C, P>
+    export type LibraryManagedAttributes<C, P> =
+      ThemeUIJSX.LibraryManagedAttributes<C, P>
     export interface IntrinsicAttributes
       extends ThemeUIJSX.IntrinsicAttributes {}
     export interface IntrinsicClassAttributes<T>

packages/theme-ui/test/__snapshots__/index.tsx.snap

@@ -12,6 +12,19 @@ exports[`BaseStyles renders 1`] = `
 />
 `;
 
+exports[`BaseStyles renders sx prop styles 1`] = `
+.emotion-0 {
+  font-family: body;
+  line-height: body;
+  font-weight: body;
+  color: var(--theme-ui-colors-custom);
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
 exports[`creates non-standard components 1`] = `
 .emotion-0 {
   color: tomato;

packages/theme-ui/test/index.tsx

@@ -217,6 +217,21 @@ test('BaseStyles renders', () => {
   expect(json).toMatchSnapshot()
 })
 
+test('BaseStyles renders sx prop styles', () => {
+  const json = renderJSON(
+    <ThemeProvider
+      theme={{
+        colors: {
+          custom: 'tomato',
+        },
+      }}
+    >
+      <BaseStyles sx={{ color: 'custom' }} />
+    </ThemeProvider>
+  )
+  expect(json).toMatchSnapshot()
+})
+
 test('custom pragma adds styles', () => {
   const json = renderJSON(
     jsx('div', {