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 的情况下获得相同的结果？例如，如何在 styled 函数中使用 useContext 作为...

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

此外，我想在 styled 函数中访问 const { isScrolling } = useContext(GlobalConsumer);，而不是从函数 Header

传递道具

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>
  );
};

React.useContext 在带样式组件的样式函数中

React.useContext in styled function with styled components

javascript

reactjs

styled-components

react-hooks