React styles hover

Question

I am building a React component library. Now, I want to add styles to the components. This works fine, but I want to change the background color if the mouse hovers. How can I do this?

import React from "react"

export interface IButtonProps {
  children: React.ReactNode;
  bg?: string;
  color?: string;
  style?: React.CSSProperties;
  onClick?: () => void;
}

export const Button: React.FC<IButtonProps> = props => {
  const {children, bg, color, style} = props;

  let _style: React.CSSProperties = style || {
    backgroundColor: "#12a4d9",
    color: "#fff",
    border: "none",
    padding: "10px 20px",
    borderRadius: "5px",
    cursor: "pointer",
    fontSize: "15px",
    fontWeight: 500,
    outline: "none",
    transition: "all 0.2s ease-in-out",
    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
  };

  if (bg) _style.backgroundColor = bg;
  if (color) _style.color = color;

  return (
    <button style={_style} {...props}>{children}</button>
  )
}

Answer 1

I believe adding "&:hover": { //style here } inside your _style obj should work.

let _style: React.CSSProperties = style || {
  backgroundColor: "#12a4d9",
  color: "#fff",
  border: "none",
  padding: "10px 20px",
  borderRadius: "5px",
  cursor: "pointer",
  fontSize: "15px",
  fontWeight: 500,
  outline: "none",
  transition: "all 0.2s ease-in-out",
  boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
  "&:hover": {
    backgroundColor: "#colorhex",
  }
};