Целевой класс c с использованием стилизованных компонентов React. js - PullRequest
Новая
       190

Целевой класс c с использованием стилизованных компонентов React. js

1 голос
/ 04 августа 2020

Я пытаюсь добавить тему в компонент панели навигации. Этот компонент имеет функцию, при которой при прокрутке вниз появляется липкая панель навигации. Я действительно застрял в нацеливании на «липкий» класс, когда окно прокручивается вниз. Это работало с обычным css, но как только я добавил его к стилизованному компоненту и удалил его из css, он не работает.

Может быть, я неправильно нацелен на className 'sticky'?

Есть предложения ?? Спасибо! 

    export function Nav() {
      const [theme, setTheme] = useState("light");
      const [theTheme, setTheTheme] = useGlobal("onTheme");

      useEffect(() => {
        if (theTheme == false) setTheme("dark");
        else setTheme("light");

   
        window.addEventListener("scroll", function () {
        var header = document.querySelector("header");
        header.classList.toggle("sticky", window.scrollY > 0);
    });
  });

  return (
    <ThemeProvider theme={getTheme(theme)}>
      <Head>
        <Navbar>
          <NavLink></NavLink>
          <NavItem icon={<CaretIcon />}>
            <DropdownMenu />
          </NavItem>
        </Navbar>
      </Head>
    </ThemeProvider>
  );
}

Я могу настроить таргетинг на «липкий» класс с помощью обычного CSS. 

    header.sticky {
      background-color: rgb(31, 31, 37);
    }

Я пытаюсь настроить «липкий» класс с помощью стилизованных компонентов. 

    export const Head = styled.header`
      position: fixed;
      width: 100%;
      background-color: transparent;
      top: 0rem;
      transition: 0.6s;
      z-index: 100000;
      text-decoration: none;
      & .sticky {
        background-color: ${(props) => props.theme.hoverColor};
       } 
     `;

1 Ответ

1 голос
/ 04 августа 2020

Похоже, что один ненужный пробел между & .sticky заканчивается применением для детей вместо самого заголовка. Правильный должен быть: 

export const Head = styled.header`
  position: fixed;
  width: 100%;
  background-color: transparent;
  top: 0rem;
  transition: 0.6s;
  z-index: 100000;
  text-decoration: none;

  &.sticky {
     background-color: ${(props) => props.theme.hoverColor};
  } 
`;
...