React css precedence

Question

I have a button component that only shows when required (it is for page down and therefore does not show on the first page).

I have done that with this code:

         <button 
            id="hidemeonmain"
            onClick={this.pageDown}
            className={this.state.count <2 
              ? 'hidden' 
              : 'clean' }
          > 
        <FontAwesomeIcon 
          icon="angle-left" 
          size="2x"
        />
        </button>

However I want to hide this button when on a @media query for max-width 736pxFOR ALL VALUES OF STATE.

I am doing this by giving it an id and hiding this in the css. However when the state gets updated it re-shows the button even with an !importantin the @media display:none style.

I thought that the id and important would have precedence over the general class.

Any ideas how to resolve this please?

TIA

EDIT: I have amended this with the correct button!! and included the #id css.

 #hidemeonmain {
    display: none !important;

I think what is happening is that when the other button (increment) is pressed this increases state and therefore effects the change in class from the ternary which is overriding the #id with the display: hidden !important;

You can add your class which is 'hidden' and 'clean' for resolution greater than mobile instead. So it would never apply for mobile, and you don't have to add any separate property for mobile as such. — Sumodh Nair
– Sumodh Nair, Commented Sep 19, 2018 at 6:08
@SumodhNair I am not sure what you mean. I have amended the question to be more specific I meant less than 736px — Nick Wild
– Nick Wild, Commented Sep 19, 2018 at 6:12
Yes, id selection rules over class, depending on how it is declared. Please add the code and the css where you do this. If you can access the console to see what is being overriden it will also help. — c-chavez
– c-chavez, Commented Sep 19, 2018 at 6:13
@NickWild In general Id has the precedence over class. However, can you check in your browser for the style properties, and see the order in which styles are getting applied? — Sumodh Nair
– Sumodh Nair, Commented Sep 19, 2018 at 6:16

amdev · Accepted Answer · 2018-09-19 20:21:37Z

1

instead of hiding it with css , you can use window.innerWidth property, it will give you the innerWidth of users browser (if you console.log it , you will see), then you can use it to add a hidden class to your element (in your case) your button!

something like below:

<button 
  onClick={this.pageUp}
  className={
     this.state.count+3 > data.allMarkdownRemark.totalCount && // your condition
     window.innerWidth < 736 // responsive rule represented by javaScript
     ? 'hidden' 
     : 'clean'}
     >
       <FontAwesomeIcon 
          icon="angle-right"
          size="2x"
          />
 </button>

also one more important note. it is a good practice to store some operational codes on a variable. in our case you may need to store the value of window.innerWidth in a variable before your return( ... ) and use he variable inside the return( ... ). something like below:

class myComponent extends React.Component {


  ... some methods and lifeCycles


  render() {

    const _innerWidth = window.innerWidth

    return(

      ...some JSX

      <button 
      onClick={this.pageUp}
      className={
         this.state.count+3 > data.allMarkdownRemark.totalCount && // your condition
         _innerWidth < 736 // responsive rule represented by javaScript
         ? 'hidden' 
         : 'clean'}
         >
           <FontAwesomeIcon 
              icon="angle-right"
              size="2x"
              />
     </button>

     ...some more jsx

    )
  }
}

edited Sep 19, 2018 at 20:21

answered Sep 19, 2018 at 6:31

amdev

7,8207 gold badges51 silver badges69 bronze badges

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

1 Comment

Nick Wild Over a year ago

This "nearly worked" but it set me in the right direction - it needed to be or || not and &&. What a great idea! Thanks @a_m_dev

Collectives™ on Stack Overflow

React css precedence

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related