search

supabase-community / auth-ui

Pre-built Auth UI for React
https://supabase.com/docs/guides/auth/auth-helpers/auth-ui
MIT License
487 stars 121 forks source link

Custom CSS classes #94

Closed emersonlaurentino closed 1 year ago

emersonlaurentino commented 1 year ago

I want to use Tailwind for customization, but I can't because the Button component has a default style and the generateClassNames always will concat if the customization, in my case overwriting.

https://github.com/supabase/auth-ui/blob/76ca3e8de4b3ed28f3b6dd21beca7fc8f7315419/packages/react/src/components/UI/Button.tsx#L63

I believe the lines of this comment are important to avoid this case.

https://github.com/supabase/auth-ui/blob/76ca3e8de4b3ed28f3b6dd21beca7fc8f7315419/packages/react/common/theming/utils.ts#L41-L46

ultracodez commented 1 year ago

Any updates?

ultracodez commented 1 year ago

Might be related to #17

silentworks commented 1 year ago

This has been fixed in the latest release with this PR https://github.com/supabase/auth-ui/pull/146.

You can now just add extend: false to the appearance property to not have any default styles rendered.

<Auth 
  supabaseClient={supabaseClient} 
  appearance={{ 
    extend: false, 
    className: {
      container: 'space-y-2'
    } 
  }}
/>