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传递道具

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

1 个答案: