Styling a Select based on isInvalid

[BMCwebdev]

React Aria Components styles a Select that is invalid via the tailwind group classname. I need to style it directly, so I need to key off of the isInvalid bool. I'm not doing inline style like this example, (I am using StyleX), but it makes the point for me.

I'm trying to understand why deconstructing isInvalid off of Select wouldn't work for me. It was always undefined. Very happy to use the renderProps method, but just trying to understand why this didn't work:

export interface SelectProps<T extends object>
  extends Omit<AriaSelectProps<T>, "children"> {
  label?: string;
  description?: string;
  errorMessage?: string | ((validation: ValidationResult) => string);
  items?: Iterable<T>;
  children: React.ReactNode | ((item: T) => React.ReactNode);
}

export function Select<T extends object>({
  label,
  description,
  errorMessage,
  children,
  items,
  isDisabled,
  isInvalid,
  isRequired,
  ...props
}: SelectProps<T>) {
  return (
    <AriaSelect
      {...props}
      isInvalid={isInvalid}
      isDisabled={isDisabled}
      isRequired={isRequired}
    >
      {label && <Label required={isRequired}>{label}</Label>}
      <Button
        style={{
          border: isInvalid ? "yellow solid 10px" : "purple solid 10px",
        }}
      >
        <SelectValue />
      </Button>
      {description && <Description>{description}</Description>}
      <FieldError>{errorMessage}</FieldError>
      <Popover offset={4}>
        <ListBox items={items}>{children}</ListBox>
      </Popover>
    </AriaSelect>
  );
}

however this does work

export function Select<T extends object>({
  label,
  description,
  errorMessage,
  children,
  items,
  ...props
}: SelectProps<T>) {
  return (
    <AriaSelect {...props}>
      {({ ...renderProps }) => (
        <>
          {label && <Label required={renderProps.isRequired}>{label}</Label>}
          <Button
            style={{
              border: renderProps.isInvalid
                ? "yellow solid 10px"
                : "purple solid 10px",
            }}
          >
            <SelectValue />
          </Button>
          {description && <Description>{description}</Description>}
          <FieldError>{errorMessage}</FieldError>
          <Popover offset={4}>
            <ListBox items={items}>{children}</ListBox>
          </Popover>
        </>
      )}
    </AriaSelect>
  );
}

[reidbarber]

In the first example, isInvalid is just whatever you're passing it in as to your custom Select (as a prop). It is undefined because you likely aren't passing anything into it.

In the second example, isInvalid is coming from the RAC Select's render props: https://react-spectrum.adobe.com/react-aria/styling.html#render-props

Note from that link that render props are available on the component itself, and in the style and className props.

I'm not too familiar with StyleX, but I assume you could do something like this:

<div
  className={({isInvalid}) =>
    stylex.props(
      styles.base,
      isInvalid && styles.isInvalid,
    ).className}
/>

[BMCwebdev]

Thanks @reidbarber.
I thought that because isInvalid is contained in SelectProps that here I was deconstructing it

export function Select<T extends object>({
  isInvalid,
  ...props
}: SelectProps<T>) {

Then I was giving it back to the React Aria Select here

    <AriaSelect
      {...props}
      isInvalid={isInvalid}
    >

Additionally it would now be available to everything within the function, including the Button

<Button
  style={{
    border: isInvalid ? "yellow solid 10px" : "purple solid 10px",
  }}
>

You pretty much got how StyleX works. I've actually been using it with React Aria for a while now, they work well together. But in your example, a random div (I didn't think) even if it was a child of Select, would have access to isInvalid. That classname would have to be directly on a React Aria component (specifically something with isInvalid in it's props.) However, you are correct, when I am styling a React Aria component, that is pretty much how I use StyleX.