Use n-th child instead of explicit classname

mittwald · Jan 16, 2024 · 139c933 · 139c933
1 parent af9a920
commit 139c933
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git a/packages/components/src/components/Initials/Initials.module.css b/packages/components/src/components/Initials/Initials.module.css
@@ -6,11 +6,11 @@
   background-color: var(--background-color);
 }
 
-.char-1 {
+.root > *:nth-child(1) {
   color: var(--char-1-color);
 }
 
-.char-2 {
+.root > *:nth-child(2) {
   color: var(--char-2-color);
 }
 

diff --git a/packages/components/src/components/Initials/Initials.tsx b/packages/components/src/components/Initials/Initials.tsx
@@ -21,9 +21,7 @@ export const Initials: FC<InitialsProps> = (props) => {
   );
 
   const initialsElements = initials.map((initial, index) => (
-    <span className={styles[`char-${index + 1}`]} key={index}>
-      {initial}
-    </span>
+    <span key={index}>{initial}</span>
   ));
 
   return (