css - 仅当条件为真时使用样式化组件并做出反应，如何添加css属性？

Question

我只想在 isOpen 条件为真时使用样式化组件添加边框属性并做出反应。

下面是我的代码，

const Wrapper = styled.div<{ $isOpen: boolean }>`
    border: 1px solid black;
    display: flex;
`;

仅当 isOpen 为真时如何应用边框？

有人可以帮我解决这个问题。谢谢。

标签： cssreactjs

Answer 1

你可以这样尝试：

const Wrapper = styled.div`    
    display: flex;

    ${({isOpen}) =>
        isOpen &&
          css`
          { 
            border: 1px solid black;
          }`
    }
`;