Reusable styles function return type

[richbachman]

Hi. I'm trying to create a reusable function that returns a set of styles that can be spread on a component. Here's the code for reference:

import React from 'react';
import { Box } from '../../index';
import type {Sprinkles} from '../../styles/atoms.css';

interface ButtonProps {
  children: React.ReactNode;
}

const baseStyles = (): Sprinkles => {
  return {
    all: 'unset',
    padding: '$space10',
  };
};

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ children, ...props }: ButtonProps, ref): JSX.Element => {
    return (
      <Box
        as="button"
        backgroundColor="$colorBackgroundPrimary"
        color="$colorTextInverse"
        ref={ref}
        {...baseStyles()}
        {...props}
      >
        {children}
      </Box>
    );
  }
);

Button.displayName = 'Button';

export { Button };

My initial thought was to set the return type to Sprinkles, but am running into a TS error:

Do you have ideas on what I should be setting that return type to? Thanks in advance for your help!

[richbachman]

I found something similar here in this issue, but what is SystemProp?

[roginfarrer]

You might try the new satisfies operator if your version of TS supports it. as const may also work. I imagine TS is not inferring the value 'unset' literally, and instead just taking it as string

const baseStyles = () => {
  return {
    all: 'unset',
    padding: '$space10',
  } satisfies Sprinkles;
};

[richbachman]

I forgot about trying satisfies. That's a good solution. Thanks for the help!