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 传递 props

Answer 1

我认为你不能在样式函数中做到这一点，但至少你可以将 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>
  );
};