How to do CSS :hover function in JSX ?

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 ?

Use React and event handlers in JavaScript instead... – Andrew Li Jun 22 '17 at 00:25 — Andrew Li, Jun 22 '17 at 00:25
Could provide the actual React code? – Luiz Henrique Guerra Jun 22 '17 at 00:48 — Luiz Henrique Guerra, Jun 22 '17 at 00:48

score 27 · Answer 1 · edited Jun 07 '18 at 13:55

27

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.

edited Jun 07 '18 at 13:55

Aniko Litvanyi

2,109
1
21
25

answered Mar 08 '18 at 19:26

generalG

341
3
4

2

How would this work? First of all, should it be ` – Markus Nov 03 '21 at 14:45
3

I don't see how this works without jss. I am getting Object is not assignable to type 'string'. – milosdju Dec 06 '21 at 22:33

Tyler Sebastian · Answer 2 · 2017-06-22T01:39:26.417

17

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 {
  ...
}

edited Jun 22 '17 at 01:39

answered Jun 22 '17 at 01:13

Tyler Sebastian

9,067
6
39
62

3

You might want to add a bit more to give beginners guidance on how to implement the above. For example, defining `setButtonHovered(bool)` and how/where to place the CSS for the `hover` class definition – Christian Oct 17 '20 at 22:50

John · Answer 3 · 2018-03-20T20:24:53.797

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.

Extremely helpful library :D glamor is awesome! – Mazhar Zandsalimi Dec 03 '19 at 11:32 — Mazhar Zandsalimi, Dec 03 '19 at 11:32

How to do CSS :hover function in JSX ?

3 Answers3