How to do CSS :hover function in JSX ? - reactjs

Question

Hi and thanks for the great job here. I am using react.js for my project to build my components and I feel a little bit stuck in my project right now. I am trying to style a button with a hover function and I don't know how to apply this to react.
Here is the code :
let button = {
backgroundColor: colorPalette.white,
border: "1px solid rgb(12,106,145)",
color: colorPalette.brandCol1,
textAlign: 'center',
textDecoration: 'none',
fontSize : 'inherit',
fontWeight : 600,
padding : "5px 8px 5px 8px"
}
and I would like to add a hover style to it just like we do in css with
button:hover {
style here.......
}
What is the correct syntax ?

Answer 1

You can use:
const styles = {
myStyleClassName: {
padding: '16px 0px 16px 0px',
'& a': {
textDecoration: 'none',
color: '#0000ee',
},
'& a:hover': {
textDecoration: 'underline',
},
},
myButtonClass: {
'&:hover': {
textDecoration: 'underline',
},
},
};
....
render() {
<span className={myStyleClassName}><a tag><button><someDomObjct></span>
<button className={myButtonClass}>my label</button>
}
See: http://cssinjs.org/jss-nested/?v=v6.0.1
The repo isn't necessary for everything, the above should work out of the box.

Answer 2

You can use onMouseEnter onMouseLeave to adjust the state of the component
<button
onMouseEnter={() => setButtonHovered(true)}
onMouseLeave={() => setButtonHovered(false)}
className={buttonIsHovered ? 'hover' : null}
/>
see here for more info
or just use a css class?
import './style.css'
<button className="Button"/>
.Button:hover {
...
}

Answer 3

Using react to manage state for a hover animation is way overkill. You shouldn't need to use javascript for a simple CSS hover...You're in the browser, use the right tool for the right job, right?
So here I'll show a couple different ways to approach the same goal:
In my component I import glamor and my styles file:
import { style } from 'glamor';
import styles from '../styles';
And in my styles file, I have something like this:
import { style } from 'glamor';
const styles = {
redHoverbutton: style({
backgroundColor: "#aaaaaa",
fontSize: "1.1rem",
transition: "all ease .5s",
":hover": {
backgroundColor: "#ff0000",
color: "#ffffff"
}
})
};
export default styles;
And this makes the hover functionality work via css, like this:
<div {...styles.redHoverbutton}></div>
This is a css driven hover effect (with transition if you noticed) but this isn't inline css. None the less, your style can be crafted in the same file, like this:
let theStyle = style({ backgroundColor: "#aaaaaa",transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } });
return (<div {...theStyle}>Hover me!</div>);
Now, how to get the style and the spread operator onto the same line and inside of the JSX element?
<div {...style({ backgroundColor: "#aaaaaa", height: "30px", width: "100%", padding: "6px", fontsize: "16px", transition: "all ease .5s", ":hover": { cursor: "pointer", backgroundColor: "#ffff9b", color: "#fd0808" } })}>Hover Me!</div>
It may not be perfect but it works well and accomplished the same thing as a true inline style and in a similar manner.