I'm currently in the process of developing a React component library, and I'm looking to enhance the components with some stylish flair. Everything seems to be working smoothly, but I'm interested in changing the background color when a user hovers over a component. How can I achieve this effect?
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>
)
}