Override link styles (#81)

Quartz · Dec 2, 2020 · f599c34 · f599c34
1 parent fd206f0
commit f599c34
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/components/TabNav/TabNav.scss b/src/components/TabNav/TabNav.scss
@@ -66,5 +66,13 @@
 	&[aria-current="true"] {
 		border-bottom: 2px solid color-scheme.$accent;
 		color: color-scheme.$accent;
+
+		a {
+			color: color-scheme.$accent;
+		}
+	}
+
+	a {
+		color: inherit;
 	}
 }
diff --git a/src/components/TabNav/TabNav.stories.mdx b/src/components/TabNav/TabNav.stories.mdx
@@ -37,16 +37,16 @@ A link (`<a>`) or button (`<button>`) element should be passed into each TabNavI
 		{args => (
 			<TabNav>
 				<TabNavItem isActive={true}>
-					<a style={{color: 'inherit'}} href="#">John</a>
+					<a href="#">John</a>
 				</TabNavItem>
 				<TabNavItem>
-					<a style={{color: 'inherit'}} href="#">Paul</a>
+					<a href="#">Paul</a>
 				</TabNavItem>
 				<TabNavItem>
-					<a style={{color: 'inherit'}} href="#">George</a>
+					<a href="#">George</a>
 				</TabNavItem>
 				<TabNavItem>
-					<a style={{color: 'inherit'}} href="#">Ringo</a>
+					<a href="#">Ringo</a>
 				</TabNavItem>
 			</TabNav>
 		)}