将 !important 添加到 React jsx 内联样式中的隐藏属性

【问题标题】：Add !important to hidden property in React jsx inline style将 !important 添加到 React jsx 内联样式中的隐藏属性
【发布时间】：2021-10-03 08:01:40
【问题描述】：

如何在 React jsx 内联样式中添加 !important 到隐藏属性？

我试图在 Ag Grid 表格组件中隐藏滚动条，因为默认情况下 Ag Grid 显示滚动条。

我已经试过了：

                  ref={(node) => {
                    if (node) {
                      node.style.setProperty('overflow-x', 'hidden', 'important');
                    }
                  }}

但它不起作用

【问题讨论】：

你的 jsx 在哪里？

标签： javascript css reactjs styles jsx

【解决方案1】：

我重新创建了您所做的，并且效果很好。我现在没有看到错误。在 ref-function 中设置后，您的 overflow-x 属性可能是由库/框架设置的。

function App() {
  return <h1 style = {
    {
      width: '10px',
      overflowX: 'visible'
    }
  }
  ref = {
    node => {
      if (node) {
        node.style.setProperty('overflow-x', 'hidden', 'important')
      }
    }
  } > Hi!This some overflow text < /h1>;
}

ReactDOM.render( < App / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：

@johannchopin，你能弄清楚吗？