styled-components问题：当键盘上的键被按下的时候，会给一个特定的元素添加一个类名，让它有新的样式。在react + styled-components中如何实现同样的效果呢？

Question

• 当键盘上的键被按下（即在windows上注册了keydown事件）的时候，会给一个特定的元素添加一个类名，让它有新的样式。
• 添加的这个样式，会产生一个transition效果。当transition结束的时候，即触发transitonend时又会去掉这个类名。

问题： 在react + styled-components中如何实现同样的效果呢？styled-components中选择器的名字都是随机生成的，而且css样式都是和组件绑定在一起的。如果要实现上面的效果，组件和样式是不是得分开？

这里有一个用纯css和js实现的样例codesandbox，我的目的就是想把它改写成react + styled-components。

Answer 1

react + styled - components 没有用过，如果是通过 js 控制的然后渲染元素并且在后续可以控制样式 ，个人是建议直接通过js来控制，如果是通过 模板语言来控制，那相对就比较简单直接通过变量来控制就好啦