Allow theming of Confirmation page / Message

Thanks for filing this issue, I created an MR that should allow this now. If you are using the 'withCustomStyles' example, add a 'messageProps' property to pass into the . Here is an example

const messageProps = {
  className: classNames(['text-red-700', 'text-sm', 'font-bold'])
 }

<Webform id={id} data={webform} customComponents={{
          message: withCustomStyles(components.message, {}, {}, {}, {}, {}, {}, messageProps),
          confirmation_page: withCustomStyles(components.confirmation_page, {}, {}, {}, {}, {}, {}, messageProps),
    }}/>

You could also do something like this where you pass in a variable with a custom message and theme.

export const Message1 = () => {
  return <div {...messageProps}>Hello I am a confirmation message</div>;
}

<Webform id={id} data={webform} customComponents={{
          message: Message1,
    }}/>

Thanks for filing this issue, I created an MR that should allow this now. If you are using the 'withCustomStyles' example, pass your styling to the the wrapperProps argument of the EnhancedComponent.

const messageProps = {
  className: classNames(['text-red-700', 'text-sm', 'font-bold'])
 }

<Webform id={id} data={webform} customComponents={{
          message: withCustomStyles(components.message, {}, {}, messageProps),
          confirmation_page: withCustomStyles(components.confirmation_page, {}, {}, messageProps),
    }}/>

You could also do something like this where you pass in a variable with a custom message and theme.

export const Message1 = () => {
  return <div {...messageProps}>Hello I am a confirmation message</div>;
}

<Webform id={id} data={webform} customComponents={{
          message: Message1,
    }}/>

Thanks! Merged!

Automatically closed - issue fixed for 2 weeks with no activity.