根據部分的背景更改漢堡菜單的顏色

Question

我正在制作一個hamburger menu作為一個組件並固定它具有fixed屬性，這具有菜單特征的三行這些是白色我需要的是當它在白色的部分時它變為黑色，即使我占用了將文本與背景進行對比的方法，但它不起作用，因為要使其工作， bg必須位於組件的父div中，而不是我發送它來調用它的位置，所以如果有人可以幫助我如何制作它改變顏色，或者如果已經有一些漢堡包的npm改變了bg顏色。

此外，有必要考慮到在每個不同的頁面中它都有不同的bg並且在我命令的所有頁面中將nav作為組件調用。

這將是我在帶有typescript nextjs占據的菜單上的代碼

import { StyledHamburger } from "./Hamburger.styled";

export type Props = {
  open: boolean;
  setOpen: (v: boolean) => void;
};

const Hamburger = (props: Props) => (
  <StyledHamburger open={props.open} onClick={() => props.setOpen(!props.open)}>
    <div />
    <div />
    <div />
  </StyledHamburger>
);

export default Hamburger;

款式：

import styled from "styled-components";

import { colors } from "../global";

export const StyledHamburger = styled.button<{ open: boolean }>`
  position: fixed;

  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  border: none;
  cursor: pointer;
  outline: none;
  z-index: 2;

  div {
    position: relative;
    width: 2rem;
    height: 0.25rem;
    border-radius: 0px;
    transition: all 0.3s linear;
    transform-origin: 1px;
    background-color: ${({ open }) =>
      open ? colors.pearl : colors.pearl};

    :first-child {
      transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
    }

    :nth-child(2) {
      opacity: ${({ open }) => (open ? "0" : "1")};
      transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
    }

    :nth-child(3) {
     
      transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
    }
  }
  p {
    position: relative;
    border-radius: 0px;
    transition: all 0.3s linear;
    transform-origin: 1px;
    background-color: ${({ open }) =>
      open ? colors.pearl : colors.pearl};
      transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
  }
`;

Answer 1

我不確定是否有一個簡單的解決方案來檢查元素的背景並進行更改。

我會使用交叉點觀察器來檢查每個部分及其背景顏色。 然后將正確的樣式應用到漢堡包元素。 它不像您所說的自動對比工具那樣自動化，但應該很容易控制和使用。

Answer 2

如果每個漢堡包菜單都位於具有不同背景的自己的頁面上，您可以使用 CSS 為每頁菜單設置樣式。 您可以做的是為每個頁面分配一個附加到正文的 id，然后在 CSS 中調用該 ID 和漢堡菜單來設置它的樣式。

例子：

<body id="homepage">
<nav class="hamburger">
</body>

對於第 2 頁：

<body id="about-us">
<nav class="hamburger">
</body>

然后在 CSS 中：

#homepage .hamburger {
your styles
}
#about-us .hamburger {
your styles
}

根據部分的背景更改漢堡菜單的顏色

問題描述

2 個解決方案

解決方案1
0 已采納 2021-07-20 15:30:05

解決方案2
0 2021-07-20 15:34:41

根據部分的背景更改漢堡菜單的顏色

問題描述

2 個解決方案

解決方案1 0 已采納 2021-07-20 15:30:05

解決方案2 0 2021-07-20 15:34:41

解決方案1
0 已采納 2021-07-20 15:30:05

解決方案2
0 2021-07-20 15:34:41