当鼠标使用React移动鼠标时，如何更改按钮的颜色

Question

带有下一个命令：

function createCustomInsertButton (onClick) {
  return (
    <button style={ { color: 'yellow', padding: '5px', paddingBottom : '6px', border: '1px', background:'red' } } onClick={ onClick }>Add New User</button>
  );
}

我创建了一个红色按钮，但是每次我的鼠标越过它的颜色都保持红色。可以在CMD内更改吗？我的意思是，如果我的鼠标越过按钮，它的颜色是否可以更改为浅红色？约束是，我只能使用相关的内容(没有外部CSS文件(

Answer 1

我认为没有一种方法可以在不使用带有纯react的状态组件的情况下执行此操作-components。

无论如何，这个想法是：您可以将background保持在按钮组件中的状态，并将onMouseEnter和onMouseLeave侦听器附加以相应地更改state。然后，您可以依靠React来为您完成其余的肮脏重新恢复工作。

演示：https：//codesandbox.io/s/pzb1zxmby

但是，对于这种事情，使用样式的组件 不使用内联CSS，因此更具性能。这种方法也更加清晰。因此，如果您可以选择使用 styled-components 之类的外部库，请务必检查一下。

以下是 stypled-components 的小演示：https：//codesandbox.io/s/9rzkqqqqqQ0bpj