How do I pass props to a style object in a separate file

[gvocale]

How can I conditionally trigger a style in a separate file by prop?

I am trying the following, but doesn't work:

// component.tsx
import * as styles from './styles';

<Badge variant='primary' circle={circle} sx={styles.root}>Hello<Badge/>

// styles.ts
export const root = ({ circle }) => {
  circle
    ? {
        borderRadius: 'full',
        lineHeight: 1
      }
    : null;
};

The following works, but I would like to move all styles to a separate file:

  <Badge
    variant='primary'
    sx={{
      ...(circle
        ? {
            borderRadius: 'full',
            lineHeight: 1
          }
        : null)
    }}
  >

[sheedy]

I'm also interested to know how to achieve this.

[hasparus]

If you're asking how to implement it in your components, well it is just an object, so we can return it from a function.

Here are few snippets and a CodeSandbox I hope will help get you going.
https://codesandbox.io/s/theme-ui-styles-in-other-file-pn2m2?file=/src/App.tsx

// Button.styles.tsx

import { ThemeUICSSObject } from "theme-ui"; // SystemStyleObject in 0.3

export interface ButtonStyleProps {
  circle?: boolean;
}

export const styles = ({ circle }: ButtonStyleProps): ThemeUICSSObject => ({
  borderRadius: circle ? "100%" : "6px",
});

// Button.tsx

/** @jsx jsx */
import { ComponentPropsWithoutRef } from "react";
import { jsx } from "theme-ui";

import { ButtonStyleProps, styles } from "./Button.styles";

export interface ButtonProps
  extends ButtonStyleProps,
    ComponentPropsWithoutRef<"button"> {
  // some other props mby?
}

export const Button = (props: ButtonProps) => {
  return <button sx={styles(props)} {...props} />;
};

If you're asking if components imported from @theme-ui/components pass all provided props to the function given to sx prop, then no. sx prop accepts either a style object or a function from a theme to style object.

In the case from your snippet, one could pass circle to the styles.root function.

<Badge variant='primary' circle={circle} sx={styles.root({ circle })}>Hello<Badge/>

[hasparus]

If you need the props to be passed through react context to arguments in sx props components, you can merge them with the theme using ThemeProvider from @theme-ui/core.

Quick example of what you can do with it.

import { ThemeProvider as CoreThemeProvider } from "@theme-ui/core";

const InvertedBackgroundProvider = ({ children }: { children: ReactNode }) => (
  <CoreThemeProvider
    theme={(outerTheme) => {
      const { background, text } = outerTheme.colors || {};

      if (text && background) {
        return {
          ...outerTheme,
          colors: Object.assign({}, outerTheme.colors, {
            text: background,
            background: text
          })
        };
      }

      return outerTheme;
    }}
  >
    {children}
  </CoreThemeProvider>
);

CodeSandbox