SCS或css，如何旋转箭头图像，当它'；s焦点

我试图旋转箭头图像时，它的焦点，但不工作

我只想旋转箭头图像。当我把

scss焦点代码

放在其他类中时，它就起作用了

react.js生成按钮组件

function LinkButton ({title, icon}, children) {

  return (
    <button className="btn">
      {/* TODO: only when node has children, show the arrow image */}
        <img className={`menu-arrow-img`} src={arrow} alt="" />
        <img className="icon" src={icon} alt="" />
      <div className="btn-title">
        {title}
      </div>
    </button>
  );
};

---

我错过了什么吗？如何仅旋转箭头图像？

当按钮聚焦时，应将变换添加到图标中

因此，它应该是：

.btn:focus {
   .menu-arrow-img {
      @include transform(rotate(90deg));
  }
}

.btn:focus {
   .menu-arrow-img {
      @include transform(rotate(90deg));
  }
}