Styling based on conditions, hovering effects, and implementing ReactJS

Question

Styling based on conditions, hovering effects, and implementing ReactJS

One issue I am facing is with an anchor element within a <div>. The anchor has conditional background styling, which seems to override the a:hover style. Whether I have conditional or fixed coloring, removing the background-style from component.js allows the hover effect from style.css to work correctly.

My main question is how can I maintain the hover effect while also using conditional background-coloring?

Snippet from component.js:

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

Snippet from style.css:

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

css reactjs

Answer 1

Answer №1

This showcases the comparison between CSS stylesheet and inline styles, where the former takes precedence due to css specificity.

Add a class to it and implement something like this.

.conditional {
  background-color: #f1f1f1;
}

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

Answer 2

This showcases the comparison between CSS stylesheet and inline styles, where the former takes precedence due to css specificity.

Add a class to it and implement something like this.

.conditional {
  background-color: #f1f1f1;
}

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

Answer 3

Answer №2

Adding on, consider checking out styled components at . It's all about personal preference, but working with the style object can sometimes feel restricting and hard to follow (in my opinion). Some may find styled components challenging to understand - it's up to you. There's a lot more to discover about styled components, so it's definitely worth exploring further. In your scenario, you might use something like the example below (or have your styled component in a separate 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>)
}

Answer 4

Adding on, consider checking out styled components at . It's all about personal preference, but working with the style object can sometimes feel restricting and hard to follow (in my opinion). Some may find styled components challenging to understand - it's up to you. There's a lot more to discover about styled components, so it's definitely worth exploring further. In your scenario, you might use something like the example below (or have your styled component in a separate 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>)
}

Answer 5

Answer №3

To ensure that the hover behavior is maintained even when inline styles are present, you can utilize the !important declaration, like this:

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

If you do not require dynamic inline styling, it is advisable to steer clear of using !important and opt for class based styling instead:

JSX

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

CSS

div a {
  display: block;
}

// Higher specificity of div to a results in blue background on hover
div a:hover {
  background: blue;
}

// Lower specificity leads to #f1f1f1 background when not hovered
.dayTwoClass {
  background: #f1f1f1;
}

Answer 6

To ensure that the hover behavior is maintained even when inline styles are present, you can utilize the !important declaration, like this:

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

If you do not require dynamic inline styling, it is advisable to steer clear of using !important and opt for class based styling instead:

JSX

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

CSS

div a {
  display: block;
}

// Higher specificity of div to a results in blue background on hover
div a:hover {
  background: blue;
}

// Lower specificity leads to #f1f1f1 background when not hovered
.dayTwoClass {
  background: #f1f1f1;
}

Styling based on conditions, hovering effects, and implementing ReactJS

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

Having trouble with applying a class in Gtk3 css?

What is the best way to delay JavaScript execution until after React has finished rendering?

Having trouble getting a resizable DIV inside a 100% height DIV with margin to work properly. Any tips or assistance would be greatly

I'm having trouble locating the documentation for jssPreset in this CodeSandbox. It seems to be missing

Ways to make video controls visible following the initial click on the video

Error encountered while rendering with ReactDOM and webpack

Error message received: `TypeError: _this.props.setCurrentUserHandle is not defined in mapDispatchToProps for Redux`

Having trouble accurately referencing the domain across various servers

The web browser's engine is blocking the connection to the secure websocket server

The text in the <p> tag will remain the same color

Storing array values in a MySQL database within the Laravel framework

Leveraging CSS or JavaScript for Displaying or Concealing Vacant Content Sections

Issue: In Firefox, resizing elements using position:absolute does not work as expected

Adjust the position of a textarea on an image using a slider

Row within a table displaying link-like behavior

Combine a variable and a string to create a new variable

Exploring ways to incorporate the context value into my component's functionality

The removal of classList.remove() only eliminates the class itself, not its contents

The HTML modal closing button is unresponsive and the contents inside are misaligned, causing functionality issues