export class name as const

ui/snippets/navigation/LightningLabel.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import IconSvg from 'ui/shared/IconSvg';
 
+export const LIGHTNING_LABEL_CLASS_NAME = 'lightning-label';
+
 const LightningLabel = ({ bgColor, isCollapsed }: { bgColor?: string; isCollapsed?: boolean }) => {
   const isLgScreen = useBreakpointValue({ base: false, lg: true, xl: false });
   const themeBgColor = useColorModeValue('white', 'black');
@@ -20,7 +22,7 @@ const LightningLabel = ({ bgColor, isCollapsed }: { bgColor?: string; isCollapse
 
   return (
     <IconSvg
-      className="lightning-label"
+      className={ LIGHTNING_LABEL_CLASS_NAME }
       name="lightning_navbar"
       boxSize={ 4 }
       ml={{ base: 1, lg: isExpanded ? 1 : 0, xl: isCollapsed ? 0 : 1 }}

ui/snippets/navigation/NavLink.tsx

@@ -10,7 +10,7 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import { isInternalItem } from 'lib/hooks/useNavItems';
 import IconSvg from 'ui/shared/IconSvg';
 
-import LightningLabel from './LightningLabel';
+import LightningLabel, { LIGHTNING_LABEL_CLASS_NAME } from './LightningLabel';
 import NavLinkIcon from './NavLinkIcon';
 import useColors from './useColors';
 import useHighlightedRoute from './useHighlightedRoute';
@@ -51,7 +51,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
       whiteSpace="nowrap"
       onClick={ onClick }
       _hover={{
-        '& *:not(.lightning-label, .lightning-label *)': {
+        [`& *:not(.${ LIGHTNING_LABEL_CLASS_NAME }, .${ LIGHTNING_LABEL_CLASS_NAME } *)`]: {
           color: 'link_hovered',
         },
       }}