How to grab a component variant className and apply it via code components?

Developer Support
1

Is there a way to grab a component variant className and apply it via code components?

Example:

export const Header = ({ behavior, children, className }: HeaderProps) => {
  const [stickyRef, inView, entry] = useInView();
  const canStick = behavior === 'sticky';
  const isStickied = !inView && entry && canStick;

  const { variants } = useComponentVariants();
  const stickyVariant = variants.find((variant) => variant.name === 'sticky');

  return (
    <>
      <div ref={stickyRef} />
      <header className={isStickied ? stickyVariant : undefined} data-sticky={isStickied ? 'true' : 'false'}>
        {children}
      </header>
    </>
  );
};
2

CSS Embed is great temporary solution until we get custom pseudo selectors. Just wondering if something like this is possible where we could have the editing experience not require knowledge of CSS