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

如何解决单击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>
)

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