Using Stylex & accessing state

[BMCwebdev]

I am working on implementing React Aria Components with Stylex. I am running in to trouble when I need to use "states, selectors, and/or render props" to conditionally render styles. It seems that classname in React Aria Components is ready to accept a function that has access to the state. But I do not see how I can access the same myself.

For Stylex, styles are applied by spreading a function onto the element.

<div {...stylex.props(styles.base)} />

As I understand it, when Stylex is run on on this code it returns a prop object of either a classname or a style object.

function props(styles: StyleXStyles | StyleXStyles[]): {
  className: string;
  style: {[key: string]: string};
};

I'm trying to figure out how I can get something like isFocusVisible in that spread function. I would like to style based on those and not data-attributes.

export function Button({ variant = 'primary', ...props }: ButtonProps) {
  const variantStyles = variant ? variants[variant] : undefined;
  return (
    <RACButton
      {...props}
      {...stylex.props(
        buttonStyle.base,
        variantStyles,
        props.isDisabled && disabled.base, // I will work
        isFocusVisible && styleXFocusRing.base, // I will not
      )}
    />
  );
}

I have a repo where I have taken the React Aria Components Tailwind starter kit and converted it into the beginning of a component library. The Button component is the one where I have started converting to Stylex. Any help would be greatly appreciated. Let me know if I can provide any more information.

https://github.com/BMCwebdev/rac-stylex

[BMCwebdev]

It looks like I can add to my component
import {useFocusVisible} from 'react-aria';
and
const { isFocusVisible } = useFocusVisible();
And then I can use isFocusVisible as I like. Yea!

However, it seems as though the RAC Button component is already doing all of this work. Is there a reason why I cannot access the state from there rather than doing it all over again in my component?

[BMCwebdev]

Ah, so I don't want to use isFocusVisible, as that is just a global bool. So, hmm. Tried using a ref, that didn't work. I guess I can use useFocusRing() and deconstruct isFocusVisible off that. But now my component is complaining " Types of property 'onFocus' are incompatible."

Still plugging away. But by moving on to useFocusRing() I feel like I'm getting further away from what would be a nice implementation like how classname works out of the box

[BMCwebdev]

Type '{ className?: string | ((values: ButtonRenderProps) => string) | undefined; style?: CSSProperties | ((values: ButtonRenderProps) => CSSProperties) | Readonly<...> | undefined; ... 239 more ...; slot?: string | ... 1 more ... | undefined; }' is not assignable to type 'ButtonProps'.
Types of property 'onFocus' are incompatible.
Type 'FocusEventHandler | undefined' is not assignable to type '((e: FocusEvent<Element, Element>) => void) | undefined'.
Type 'FocusEventHandler' is not assignable to type '(e: FocusEvent<Element, Element>) => void'.
Types of parameters 'event' and 'e' are incompatible.
Type 'FocusEvent<Element, Element>' is not assignable to type 'FocusEvent<FocusableElement, Element>'.
Type 'Element' is missing the following properties from type 'FocusableElement': autofocus, dataset, tabIndex, blur, focusts(2322)

The error suggests that the onFocus event handler type in focusProps is not directly compatible with what RACButton expects. This could be due to differences in the definition of FocusEvent types or the element types they operate on (FocusableElement vs. Eleme

[BMCwebdev]

Well, I guess {...(focusProps as any)}

[snowystinger]

could you do something like this?

    <RACButton
      {...props}
      className={(renderProps) => stylex.props({...renderProps, {variant}}).className}
      style={(renderProps) => stylex.props({...renderProps, {variant}}).style}
    />

[BMCwebdev]

You beautiful beautiful man! I don't know if there will be any side effects using it like this on the Stylex side, I will check in with them, but this works wonderfully so far. Thank you!

<RACButton
  {...props}
  className={(renderProps: ButtonRenderProps) => stylex.props(
    buttonStyle.base,
    variantStyles,
    renderProps.isFocusVisible && styleXFocusRing.base,
    props.isDisabled && disabled.base,
  ).className || ''}
  style={(renderProps: ButtonRenderProps) => stylex.props(
    buttonStyle.base,
    variantStyles,
    renderProps.isFocusVisible && styleXFocusRing.base,
    props.isDisabled && disabled.base,
  ).style || {}}
/>