fix style nesting

components/CodeBlock/CodeBlock.tsx

@@ -9,7 +9,7 @@ const Block = styled("div", {
   margin: "1em auto",
   color: "$codeText",
 
-  [`${Code}`]: {
+  [`& ${Code}`]: {
     display: "block",
     overflowX: "auto",
     padding: "1em",

components/Menu/Menu.tsx

@@ -45,12 +45,16 @@ const Menu = ({ ...rest }: MenuProps) => {
 
   return (
     <Wrapper {...rest}>
-      {menuItems.map((item, index) => (
-        <Item key={index}>
-          {/* kinda weird/hacky way to determine if the *first part* of the current path matches this href */}
-          <MenuItem {...item} current={item.href === `/${router.pathname.split("/")[1]}`} />
-        </Item>
-      ))}
+      {menuItems.map((item, index) => {
+        // kinda weird/hacky way to determine if the *first part* of the current path matches this href
+        const isCurrent = item.href === `/${router.pathname.split("/")[1]}`;
+
+        return (
+          <Item key={index}>
+            <MenuItem {...item} current={isCurrent} />
+          </Item>
+        );
+      })}
 
       <Item>
         <MenuItem icon={ThemeToggle} />

components/NoteTitle/NoteTitle.tsx

@@ -9,7 +9,7 @@ const Title = styled("h1", {
   lineHeight: 1.3,
   fontWeight: 700,
 
-  code: {
+  "& code": {
     margin: "0 0.075em",
   },
 

components/VNC/VNC.tsx

@@ -12,10 +12,10 @@ const Display = styled(
     maxWidth: "800px",
 
     // these are injected by noVNC after connection, so we can't target them directly:
-    div: {
+    "& div": {
       background: "none !important",
 
-      canvas: {
+      "& canvas": {
         cursor: "inherit !important",
       },
     },

components/Video/Video.tsx

@@ -13,7 +13,7 @@ const Player = styled(ReactPlayer, {
   top: 0,
   left: 0,
 
-  video: {
+  "& video": {
     borderRadius: "$rounded",
   },
 });

components/YouTubeEmbed/YouTubeEmbed.tsx

@@ -14,7 +14,7 @@ const Player = styled(ReactPlayer, {
   left: 0,
 
   // target both the lazy thumbnail preview *and* the actual YouTube embed
-  ".react-player__preview, iframe": {
+  "& .react-player__preview, & iframe": {
     borderRadius: "$rounded",
   },
 });