fix: prefix Pseudo-classes with an ampersand

nulogy · Dec 11, 2024 · 59ab629 · 59ab629
1 parent b33697c
commit 59ab629
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/src/BottomSheet/BottomSheet.styled.tsx b/src/BottomSheet/BottomSheet.styled.tsx
@@ -37,7 +37,7 @@ const Sheet = styled(motion(ReachDialogContent)).withConfig({
   shouldForwardProp: excludeStyledProps(...styleFns),
 })<SheetProps>(
   ({ theme }) => ({
-    ":focus": {
+    "&:focus": {
       outline: "none",
     },
     inset: 0,

diff --git a/src/Input/InputField.tsx b/src/Input/InputField.tsx
@@ -95,7 +95,7 @@ const InputWrapper = styled(Box)<BoxProps>(({ theme }) => ({
   display: "flex",
   flexGrow: 1,
 
-  ":focus-within": {
+  "&:focus-within": {
     svg: {
       color: theme.colors.darkBlue,
     },

diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx
@@ -27,7 +27,7 @@ const StyledReactModal = styled(ReactModal)(
     maxWidth,
   }),
   ({ theme }): CSSObject => ({
-    ":focus": {
+    "&:focus": {
       outline: "none",
     },
     display: "flex",

diff --git a/src/NavBarSearch/NavBarSearch.js b/src/NavBarSearch/NavBarSearch.js
@@ -38,7 +38,7 @@ const NavBarSearch = styled(BaseNavBarSearch)(({ theme }) => ({
     border: "solid 1px transparent",
     borderRadius: theme.radii.medium,
     minWidth: theme.space.x5,
-    ":focus": {
+    "&:focus": {
       color: theme.colors.white,
       background: darken(0.1, theme.colors.blue),
       border: `solid 1px ${theme.colors.lightBlue}`,
@@ -54,7 +54,7 @@ const NavBarSearch = styled(BaseNavBarSearch)(({ theme }) => ({
     background: "transparent",
     border: "solid 1px transparent",
     borderRadius: theme.radii.medium,
-    ":focus": {
+    "&:focus": {
       background: theme.colors.white,
       border: "solid 1px transparent",
       boxShadow: "none",