Javascript 反应css优先级

我有一个按钮组件，仅在需要时显示（它用于向下翻页，因此不会显示在第一页）

我已使用此代码完成了此操作：

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

---

我认为现在发生的是，当按下另一个按钮（增量）时，这会增加状态，因此会影响三元组中的类更改，三元组使用

display:hidden覆盖#id！重要的

您可以使用

window.innerWidth

属性，而不是用css隐藏它，它将为您提供用户浏览器的innerWidth（如果您使用console.log，您将看到），然后您可以使用它将隐藏类添加到元素（在您的情况下）您的按钮

如下所示：

<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> 

---

您可以添加“隐藏”和“干净”的类，以获得比mobile更高的分辨率。所以它永远不会适用于手机，你也不必为手机添加任何单独的属性。@SumodhNair我不知道你的意思。我把问题修改得更具体了，我的意思是少于736px是的，id选择规则凌驾于类之上，这取决于它是如何声明的。请在您执行此操作的地方添加代码和css。如果您可以访问控制台查看被覆盖的内容，它也会有所帮助。@NickWild在常规Id中优先于类。但是，您可以在浏览器中查看样式属性，并查看样式的应用顺序吗？这“几乎成功”，但它为我指明了正确的方向-它需要是或| |不是和&&。好主意！谢谢@a_m_dev

<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> 

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

    )
  }
}