diff --git a/src/shared/components/text/text.module.css b/src/shared/components/text/text.module.css
index f90ef3317..373c6be4f 100644
--- a/src/shared/components/text/text.module.css
+++ b/src/shared/components/text/text.module.css
@@ -4,7 +4,7 @@
     user-select: auto;
 }
 
-.root.muted {
+.muted {
     color: var(--theme-colors-foreground-muted);
 }
 
@@ -23,6 +23,6 @@
     white-space: nowrap;
 }
 
-.root.no-select {
+.no-select {
     user-select: none;
 }
diff --git a/src/shared/components/text/text.tsx b/src/shared/components/text/text.tsx
index 84047b7ee..8508e7073 100644
--- a/src/shared/components/text/text.tsx
+++ b/src/shared/components/text/text.tsx
@@ -33,12 +33,14 @@ export const _Text = ({
 }: TextProps) => {
     return (
         <MantineText
-            className={clsx(styles.root, {
-                [styles.link]: isLink,
-                [styles.muted]: isMuted,
-                [styles.noSelect]: isNoSelect,
-                [styles.overflowHidden]: overflow === 'hidden',
-            })}
+            classNames={{
+                root: clsx(styles.root, {
+                    [styles.link]: isLink,
+                    [styles.muted]: isMuted,
+                    [styles.noSelect]: isNoSelect,
+                    [styles.overflowHidden]: overflow === 'hidden',
+                }),
+            }}
             component="div"
             fw={weight}
             style={