${props.url} How do I do this without Styled Components?

[BuchananQuantum]

Transitioning over from styled components. How do I inject props into stitches components?

const Header = styled.div<{ url?: string }> height: 310px; background-color: ${colors.placeholder}; ${(props) => props.url && css
background-image: url(${props.url});
background-position: center;
background-size: cover;
`}

@media(min-width: 1536px) {
border-radius: 20px;
}
`

[predaytor]

You can create a wrapper with React.forwardRef.

Using styled:

import { styled } from 'stitches.config';
import type { CSS, VariantProps } from 'stitches.config';
import React from 'react';

const Component = styled('div', {
	height: '310px',
	// theme.colors.placeholder in config file
	backgroundColor: '$placeholder',
	backgroundPosition: 'center',
	backgroundZize: 'cover',

	variants: {},
	compoundVariants: [],
	defaultVariants: {},
});

type HeaderVariants = VariantProps<typeof Component>;
type HeaderProps = React.ComponentPropsWithRef<'div'> &
	HeaderVariants & { css?: CSS, url?: string };

export const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
	({ url, css, ...props }, ref) => {
		return <Component {...props} ref={ref} css={{ backgroundImage: `url(${url})`, ...css }} />;
	}
);

Using css:

import { css } from 'stitches.config';
import type { CSS, VariantProps } from 'stitches.config';
import React from 'react';
import clsx from 'clsx';

const styles = css({
	height: '310px',
	backgroundColor: '$placeholder',
	backgroundPosition: 'center',
	backgroundZize: 'cover',

	variants: {
		variant: {
			gray: {},
		},
	},
});

type HeaderVariants = VariantProps<typeof component>;
type HeaderProps = React.ComponentPropsWithRef<'div'> &
	HeaderVariants & { css?: CSS, url?: string };

export const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
	({ url, variant, css, ...props }, ref) => {
		const className = clsx(
			styles({
				variant,
				css: {
					...css,
					backgroundImage: `url(${url})`,
				},
			}).className,
			props.className
		);

		return <div {...props} ref={ref} className={className} />;
	}
);

[predaytor]

If you need a component to be polymorphic, use Radix Slot approach.

[BuchananQuantum]

Thanks for including both methods! Truly appreciate you!