From 2a18924ff525d746e8d4fb2683f3128bcb95c342 Mon Sep 17 00:00:00 2001
From: Marc <39219018+VIEWVIEWVIEW@users.noreply.github.com>
Date: Wed, 5 Apr 2023 01:57:27 +0200
Subject: [PATCH] Added comment for ``extend`` flag for custom css classes

I wasted an hour on figuring out why the styles were merging instead of overridden. Apparently there is a flag to ``extend`` styles, but it's not mentioned in the docs here. This fixes this (and adds another comment to make it more consistent).
---
 apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
index 52f2e5acf68..4c427e2b15a 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
@@ -248,7 +248,7 @@ You can swich between different variations of your theme with the ["theme" prop]
 ### Custom CSS classes [#custom-css-classes]
 
 You can use custom CSS classes for the following elements:
-`"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`.
+`"button"`, `"container"`, `"anchor"`, `"divider"`, `"label"`, `"input"`, `"loader"`, `"message"`. 
 
 ```js title=/src/index.js
 import { createClient } from '@supabase/supabase-js'
@@ -260,6 +260,9 @@ const App = () => (
   <Auth
     supabaseClient={supabase}
     appearance={{
+      // If you want to extend the default styles instead of overriding it, set this to true
+      extend: false,
+      // Your custom classes
       className: {
         anchor: 'my-awesome-anchor',
         button: 'my-awesome-button',