如何仅在使用样式化组件和react的条件为true时添加css属性？

我只想在isOpen条件为true时使用样式化组件和react添加border属性

下面是我的代码

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

const Wrapper=styled.div`
边框：1px纯黑；
显示器：flex；
`;

如何仅在“等参线”为真时应用边界

---

有人能帮我吗。谢谢。

从主页抓取一个例子：

import styled，{css}来自“styled components”
const Button=styled.Button`
背景：透明；
边界半径：3px；
边框：2倍纯色淡紫色；
颜色：淡紫罗兰色；
边缘：0 1米；
填充物：0.25em 1米；
${props=>
初级道具&&
css`
背景：紫罗兰属；
颜色：白色；
`};
`

如何在react渲染器中使用它：

render(
  <Container>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </Container>
);

渲染(
普通按钮
主按钮
);

您可以这样尝试：

const Wrapper = styled.div`    
    display: flex;

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