忽略错误 className 与 Gatsby 中的服务器和客户端不匹配答案

【问题标题】：Ignore the errors className did not match Server and Client in Gatsby忽略错误 className 与 Gatsby 中的服务器和客户端不匹配
【发布时间】：2021-02-05 14:08:25
【问题描述】：

我正在使用css框架并像这样放置cdns

//public <head> tag
<Helmet>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/css/uikit.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.6.15/dist/js/uikit-icons.min.js"></script>
</Helmet>

组件内的示例

//Layout menu
<nav className="uk-navbar-container" data-uk-navbar="">
  <div className="uk-navbar-center">
    <ul className="uk-navbar-nav">
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/request">Request</Link></li>
    </ul>
  </div>
</nav>
...

例如，我收到错误

Warning: Prop `className` did not match. Server: "uk-navbar-container uk-navbar" Client: "uk-navbar-container"

UIkit JS 会在页面加载时调整class (className)，我想保留它用于动画内容。然后我试过了

// just add "uk-navbar" fixed the errors
<nav className="uk-navbar-container uk-navbar" data-uk-navbar="">
  <div className="uk-navbar-center">
    <ul className="uk-navbar-nav">
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/request">Request</Link></li>
    </ul>
  </div>
</nav>
...

但实际上要查找的错误太多了

如何关闭（忽略）Gatsby 中的错误（警告）？

【问题讨论】：

标签： reactjs gatsby getuikit

【解决方案1】：

默认情况下，Gatsby 带有默认的 ESLint 配置。从docs可以看到：

Gatsby 附带一个内置的 ESLint 设置。对于大多数用户来说，我们的内置的 ESLint 设置就是你所需要的。如果你知道你会喜欢自定义您的 ESLint 配置，例如贵公司有自己的自定义 ESLint 设置，这显示了如何做到这一点

要禁用 ESLint，只需在项目的根目录中创建一个空的 .eslintrc 文件。

【讨论】：

谢谢，但仍然显示错误。我做了npm i eslint-config-react-app 并根据文档创建了.eslintrc。我还缺少什么流程吗？