如何在CSS in JS中为<input type="image">定义常态与悬停图片？

你遇到的问题核心是CSS in JS里伪类的写法错误，我帮你梳理清楚并修正代码：

首先，你代码里的&:hover是转义后的字符，在CSS in JS的语法中，应该直接写&:hover就可以了，不需要转义成&，这是导致语法错误的关键原因。

另外，<input type="image">本身带有默认的边框和内边距，想要完美切换图片，还需要处理这些默认样式，同时要显式设置按钮的宽高来匹配图片尺寸。下面是修正后的完整代码示例（以常用的styled-components为例）：

import styled from 'styled-components';

// 定义样式化的谷歌登录按钮
const GoogleSignInBtn = styled.input`
  margin: 40px;
  border: none; /* 去掉input默认边框 */
  padding: 0; /* 去掉默认内边距 */
  width: 191px; /* 匹配你的图片宽度 */
  height: 46px; /* 匹配你的图片高度 */
  cursor: pointer; /* 鼠标悬停显示指针，提升交互体验 */
  background: url(/btn_google_signin_light_normal_web.png) no-repeat center/contain;

  /* 悬停状态切换图片 */
  &:hover {
    background: url(/btn_google_signin_light_focus_web.png) no-repeat center/contain;
  }

  /* 可选：加上点击状态的图片切换 */
  &:active {
    background: url(/btn_google_signin_light_pressed_web.png) no-repeat center/contain;
  }
`;

// 使用组件
<GoogleSignInBtn type="image" alt="使用谷歌登录" />

额外注意事项： #

• 必须显式设置宽高：<input type="image">默认会根据图片尺寸渲染，但有时候会受父元素或全局样式影响，显式设置能保证按钮尺寸和图片完全匹配。
• 背景图片属性：加上no-repeat center/contain可以避免图片重复显示，同时让图片在按钮容器内居中且完整展示。
• 如果用其他CSS in JS方案（比如Emotion），写法逻辑是一致的，核心都是正确使用&:hover伪类。

内容的提问来源于stack exchange，提问作者It'sNotMe