You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 #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
Bug report
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 #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
![image](https://private-user-images.githubusercontent.com/25749103/253744368-8d6ab4c1-ea70-4df3-95dd-cb21df7019c9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwMjE0NTYsIm5iZiI6MTczOTAyMTE1NiwicGF0aCI6Ii8yNTc0OTEwMy8yNTM3NDQzNjgtOGQ2YWI0YzEtZWE3MC00ZGYzLTk1ZGQtY2IyMWRmNzAxOWM5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDEzMjU1NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVhZjVjNjRjYjI2ZjYzMDhmMjdkNmM0MDc2YmExZDViMWU3YmM3OTYyMmVhMWY5ODM1NTZmNDBjMDA3N2EzMWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.SH6KFVqYZqrJZK4tAJUNAXW3mBsKnJIuIuditFCi2lo)
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 theborder
), 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
Auth
into a svelte applicationclassName
to create a button style that includes things such aspadding: 1rem
and note that they are not applied (Note: using a theme such astheme: 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
System information
supabase-js@supabase/auth-ui-shared: 0.1.6supabase-js@supabase/auth-ui-svelte: 0.2.2Additional context
N/A
The text was updated successfully, but these errors were encountered: