Problem with resolving css

[jandnil]

Hi I have a issue related to css=[object object] when using CRA and twin.macro for tailwind styling
I have tried to read the docs and added /** @jsxImportSource @emotion/react */

Component works when running in story book same project as the component

When imported into new project and used the component works just fine besides the problem:
<button css="[object Object],[object Object],[object Object]"><span>Button Text</span></button>

Component in question is very simple for testing and looks like:

`/** @jsxImportSource @emotion/react */
import * as React from 'react';
import { buttonDefaultStyle } from './styles';
import { ButtonSizes, ButtonVariants } from './theme';
import { Icon, IconifyIconProps } from '@iconify/react';

interface ButtonProps extends React.HTMLAttributes {
variant?: typeof ButtonVariants[keyof typeof ButtonVariants];
size: typeof ButtonSizes[keyof typeof ButtonSizes];
children?: React.ReactNode;
iconName?: IconifyIconProps['icon'];
iconSize?: IconifyIconProps['height'];
}

export const Button: React.FunctionComponent = ({
variant,
size,
children,
iconName,
iconSize,
...rest
}) => {
const renderIcon =
iconName != '' && iconName != undefined && iconName != null;
return (
<button
css={[buttonDefaultStyle, ButtonVariants[variant], ButtonSizes[size]]}
{...rest}
>
{renderIcon ? (
<Icon icon={iconName ?? ''} height={iconSize ?? '0'} />
) : null}
{children}

);
};

Button.defaultProps = {
variant: 'default',
size: 'sm',
iconName: 'line-md:alert-twotone',
iconSize: 'auto',
};
`
Any pointers would be highly appreciated Thanks :-)

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.