Card 选中后样式改变并一直存在

要实现 Card 选中后样式改变并一直存在的效果，可以使用组件的状态来控制样式。具体实现方法如下：

1. 在 Card 组件的构造函数中，定义一个状态 selected，初始值为 false。

constructor(props) {
  super(props);
  this.state = {
    selected: false,
  };
}

2. 在 Card 组件的点击事件中，更新 selected 状态的值。

handleClick = () => {
  this.setState({
    selected: true,
  });
}

3. 在 Card 组件的 className 属性中，根据 selected 状态的值动态指定不同的 CSS 类名。

<Card
  className={this.state.selected ? styles.selected_card : styles.single_card}
  onClick={this.handleClick}
>
  {/* Card 的内容 */}
</Card>

4. 在 CSS 文件中定义两个不同的 CSS 类名，分别对应选中和未选中时的样式。其中，选中时的样式可以使用 !important 关键字来强制生效。

.selected_card {
  background-color: #87cefa !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.single_card {
  /* 未选中时的样式 */
}

这样，当用户点击 Card 组件时，就会根据 selected 状态的值动态地改变样式。而且，由于选中时的样式使用了 !important 关键字，所以即使用户点击其他地方，样式也会一直保持不变。