有条件地渲染带有样式组件的组件

Question

With styled components, I can pass in values and then get conditional css based on those values. For instance, I can do,

const ContainerStyled = styled.div<{isOpen: boolean}>`
  ${({ isOpen }) => isOpen
    ? background-color: red
    : ''
  }
`

However, I'm wondering if it's possible to conditionally render a different component, based on that value? For instance, something like,

const ContainerStyled = styled(isOpen ? ArrowUpIcon : ArrowDownIcon)`
  ${({ isOpen }) => isOpen
    ? background-color: red
    : ''
  }
`

Answer 1

I'm guessing that you asking if you can change the styled target depending on condition .

For that you need to make simple steps:

1. The custom component has to pass the className prop .
2. Use as API with condition.

In the next example, the button toggles between rendering a styled.div and styled(Component) .

const Container = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${({ isOpen }) => (isOpen ? `red` : `blue`)};
`;

const Component = ({ className }) => <div className={className}>Hello</div>;

const App = () => {
  const [isOpen, toggle] = useReducer(p => !p, false);
  return (
    <>
      <Container as={isOpen ? Component : 'div'} isOpen={isOpen} />
      <button onClick={toggle}>Toggle</button>
    </>
  );
};

Answer 2

You can attach as polymorphic prop using attrs chainable method based on passed isOpen prop:

const ContainerStyled = styled(ArrowDownIcon).attrs(({ isOpen }) => ({
  as: isOpen ? ArrowUpIcon : undefined
}))`
  background-color: ${({ isOpen }) => isOpen ? 'red' : ''};
`;