Alfred-Mountfield commented 1 year ago

Bug report

[x] I confirm this is a bug with Supabase, not with my own application.
[x] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

The library allows the setting of custom class names for components, however the implementation is limited in the properties that they can overwrite. I am using Tailwind CSS similar to https://github.com/supabase/auth-ui/issues/94 (although I am using Svelte) and even with appearance.extend: false I am unable to easily style the buttons to match the rest of my application.

There are still a host of styling properties that are applied which overwrite ones I try and set through appearance.className:

This is greatly hurting the ergonomics as I'm having to set an !important modifier on my properties to actually be able to override them (such as removing the border), which in turn makes it hard for me to re-use my button styling from the rest of my application (where I do not want to use !important).

To Reproduce

Insert Auth into a svelte application
Disable the default theme and try and customise the appearance
Try and use className to create a button style that includes things such as padding: 1rem and note that they are not applied (Note: using a theme such as theme: ThemeSupa will apply its own padding due to setting the variables)

Expected behavior

I would expect the CSS properties I set to actually additively apply to the element, but perhaps there should be an option to remove all styling from the elements and only apply the class name

Screenshots

    <Auth
        {supabaseClient}
        providers={['google']}
        {redirectTo}
        {view}
        showLinks={false}
        theme="dark"
        appearance={{
            extend: false,
            className: {
                button: 'button-base button-primary',
            }
        }}
        additionalData={{}}
    />

System information

OS: macOS
Browser (if applies): chrome
Version of ~~supabase-js~~ @supabase/auth-ui-shared: 0.1.6
Version of ~~supabase-js~~ @supabase/auth-ui-svelte: 0.2.2
Version of Node.js: 18.6.1

Additional context

N/A

johnmdonich commented 1 year ago

@Alfred-Mountfield, did you ever find a workaround for this? I have the same issue.