Custom styles example? about remix-forms HOT 8 CLOSED

import * as React from 'react'
import type { FormProps } from 'remix-forms'
import { Form } from 'remix-forms'
import type { SomeZodObject } from 'zod'
import Button from '~/components/button'
import { cx } from '~/framework/common'

function RemixForm<Schema extends SomeZodObject>(props: FormProps<Schema>) {
  return (
    <Form<Schema>
      fieldComponent={(props) => (
        <div
          {...props}
          className={cx(
            'flex flex-col text-left focus-within:text-blush',
            props.className,
          )}
        />
      )}
      labelComponent={(props) => (
        <label
          {...props}
          className={cx('mb-1 px-3 text-sm text-current', props.className)}
        />
      )}
      inputComponent={React.forwardRef<
        HTMLInputElement,
        JSX.IntrinsicElements['input']
      >(({ type = 'text', ...props }, ref) => (
        <input
          ref={ref}
          type={type}
          {...props}
          className={cx(
            'rounded border-gray-light px-3 py-4 transition-all focus:border-blush focus:ring-blush',
            props.className,
          )}
        />
      ))}
      multilineComponent={React.forwardRef<
        HTMLTextAreaElement,
        JSX.IntrinsicElements['textarea']
      >((props, ref) => (
        <textarea
          ref={ref}
          {...props}
          className={cx(
            'rounded border-gray-light px-3 py-4 transition-all focus:border-blush focus:ring-blush',
            props.className,
          )}
        />
      ))}
      selectComponent={React.forwardRef<
        HTMLSelectElement,
        JSX.IntrinsicElements['select']
      >((props, ref) => (
        <select
          ref={ref}
          {...props}
          className={cx(
            'rounded border-gray-light px-3 py-4 transition-all focus:border-blush focus:ring-blush',
            props.className,
          )}
        />
      ))}
      buttonComponent={(props) => (
        <Button
          variant="primary"
          size="lg"
          contained
          type="submit"
          {...props}
        />
      )}
      fieldErrorsComponent={(props) => (
        <small
          {...props}
          className={cx('mt-1 px-3 text-salmon', props.className)}
        />
      )}
      globalErrorsComponent={(props) => (
        <small
          {...props}
          className={cx('mt-1 px-3 text-salmon', props.className)}
        />
      )}
      errorComponent={(props) => (
        <span
          {...props}
          className={cx('text-xs font-semibold text-current', props.className)}
        />
      )}
      renderField={({ Field, ...props }) => {
        const { label, required, errors } = props
        return (
          <Field {...props}>
            {({ Label, SmartInput, Errors }) => (
              <>
                <Label className={cx(errors && '!text-salmon')}>
                  {label}
                  {required && ' *'}
                </Label>
                <SmartInput
                  className={cx(errors && '!border-salmon !text-salmon')}
                />
                <Errors />
              </>
            )}
          </Field>
        )
      }}
      {...props}
    />
  )
}

export default RemixForm