javascript - 带有样式组件的样式函数中的 React.useContext

Question

我目前正在使用在函数内的元素useContext中设置。className例如...

const Wrapper = styled.header`
  background: transparent;
  &.active {
    background: black;
  }
`;

const Header = () => {
  const { isScrolling } = useContext(GlobalConsumer);
  return (
    <Wrapper className={isScrolling ? 'active' : ''}>
      Header
    </Wrapper>
  );
};

但是，如何在不设置的情况下获得相同的结果className？例如，如何useContext在styled函数内部使用...

const Wrapper = styled.header`
  background: ${isScrolling ? 'black' : 'transparent'};
`;

另外，我想访问函数const { isScrolling } = useContext(GlobalConsumer);内部styled，而不是从函数传递道具Header

标签： javascriptreactjsreact-hooksstyled-components

Answer 1

我不认为你可以在 styled 函数中做到这一点，但至少你可以将 className 更改为 prop：

import styled, { css } from 'styled-components';

const Wrapper = styled.header`
  background: transparent;
  ${props => props.active && css`
      background: black;
  `}
`;

const Header = () => {
  const { isScrolling } = useContext(GlobalConsumer);
  return (
    <Wrapper active={isScrolling}>
      Header
    </Wrapper>
  );
};