Props not being passed properly

[samchouse]

// component.tsx
import { styled } from '@stitches/react';
import React, { useEffect } from 'react';

export interface Props {
  disabled?: boolean;
  className?: string;
}

const SomeParentComponent: React.FC<Props> = ({
  disabled,
  ...props
}: Props) => {
  useEffect(() => console.log('Parent:', disabled), [disabled]);

  return <p {...props}>Hi</p>;
};

const SomeComponent = styled(SomeParentComponent, {
  color: 'black',
  variants: {
    disabled: {
      true: {
        color: 'BlueViolet'
      }
    }
  }
});

export const Component: React.FC<Props> = ({ disabled }: Props) => {
  useEffect(() => console.log('Child:', disabled), [disabled]);

  return <SomeComponent disabled={disabled} />;
};

// component.stories.tsx
import { Meta, Story } from '@storybook/react';
import React from 'react';

import { Component, Props } from './test';

const config: Meta = {
  title: 'Component',
  component: Component
};
export default config;

const Template: Story<Props> = (args) => <Component {...args} />;

export const Default = Template.bind({});
Default.args = {
  disabled: false
};

If you check logging then the parent useEffect won't be working, only the child's. Is there a way to pass through properly?

[MrKou47]

I thought in stitches.js you can only styled a styled component, am I missing something?