单击上的按钮reactjs和样式化组件

我的样式化组件：

const Button = styled.button
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "grey" : "white"};
  color: ${props => props.primary ? "white" : "grey"};

  font-size: 1em;
  margin: 1px;
  padding: 0.25em 1em;
  border: 1px solid grey;
  cursor: pointer;
  border-radius: 3px;
`;`

这是我的回报

 return (

  <div className="App">

    <Button >Lunch</Button>
    <Button primary>Dinner</Button>
    </div>
  </div>
)

返回(
午餐
晚餐
)

---

当按钮“午餐”点击设计按钮与“晚餐”交换时，按钮看起来是这样的，如何使按钮onclik（如按钮处于活动状态和非活动状态），我是reactjs和样式化组件的新手。

您的样式组件看起来不错。你说交换是什么意思？午餐获得晚餐风格，反之亦然？您可以使用三元运算符添加“主要”属性，因此当单击“午餐”按钮时，切换样式并将其应用于“晚餐”btn，反之亦然。问题是什么？@mohitara三元运算符是什么意思？我的意思是什么？，哈哈，我真的不知道no@dipretelin检查MDN文档，您可以使用三元运算符计算条件，并执行条件计算为true或false时必须执行的操作。在您的情况下，您可以将颜色应用于按钮