Conditional styles, hover and ReactJS

Question

I have an anchor within a <div>, the anchor uses conditional styling for it's background and this seems make it so that the a:hover style gets discarded. Actually it doesn't matter if I have conditional or just a fixed color, if I remove the background-style from component.js the hover-effect from style.css kicks in.

My question is how do I achieve the hover effect while still having a conditional background-color?

component.js:

<div>
  <a href="#"
     style={{
       background: (day === 2) && "#f1f1f1"
     }} />
</div>

style.css:

div a {
  display: block;
}
div a:hover {
  background: blue;
}

jnowland · Accepted Answer · 2018-12-20 22:49:16Z

3

This is a great use case for CSS stylesheet vs inline styles which will override due to css specificity.

Pop a class on it and do something like.

.conditional {
  background-color: #f1f1f1;
}

.conditional:hover {
  background-color: red;
}

answered Dec 20, 2018 at 22:49

jnowland

2,2451 gold badge20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

howtopythonpls Over a year ago

Yes I get it, that is better than !important. I ended up going for className= {(day===2) && "activeDay"} and moving the styles to the external stylesheet.

dorriz · Accepted Answer · 2018-12-21 17:35:14Z

2

Just to add, take a look at styled components https://www.styled-components.com/ . Its a matter of preference but using the style object can be a bit limiting and difficult to read (IMHO), some would say styled components is hard to read - your choice There's lots more to styled components so definitely worth taking a look. your use case would be something like below (or you could have your styled component in a different module)

import React from 'react'
import styled from 'styled-components'

const Link = styled.a`
  display: block;

  & :hover {
    background: ${props => props.dayValue === 2 ? white : blue};
  }
`

render(){
  return (<div> <Link href='' dayValue={this.props.dayValue}/></div>)
}

answered Dec 21, 2018 at 17:35

dorriz

2,7693 gold badges15 silver badges19 bronze badges

1 Comment

howtopythonpls Over a year ago

Thanks for your tip, I will definitely consider this. It can become quite messy with the inline styling.

Dacre Denny · Accepted Answer · 2018-12-20 22:48:59Z

0

One solution would be to use !important to force the :hover behaviour even when inline styles as you have are applied, like so:

div a:hover {
  background: blue !important;
}

If dynamic inline styling is not required (ie you don't need a dynamic background color), then you'll typically want to avoid the use of !important in favour of class based styling:

JSX

<div>
  <a href="#" className={ (day === 2) && "dayTwoClass" } />
</div>

CSS

div a {
  display: block;
}

// Increased specificity of div to a causes blue background on hover
div a:hover {
  background: blue;
}

// Lesser specificity causes f1f1f1 background when not hovered
.dayTwoClass {
  background: #f1f1f1;
}

edited Dec 20, 2018 at 22:48

answered Dec 20, 2018 at 22:39

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

3 Comments

howtopythonpls Over a year ago

Wait, I'm sure I tried that but I couldn't have because it works.. Thanks! :D

Josh Kelly Over a year ago

i have to downvote this. Stay away from using tags as selectors as well as !important. It decreases the maintainability of your stylesheets and you'll get into a mess real fast.

Dacre Denny Over a year ago

@JoshKelly fair enough - the answer does recommend against the use of !important in favour of the class based alternative :)

Collectives™ on Stack Overflow

Conditional styles, hover and ReactJS

3 Answers 3

1 Comment

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Related