React-flexbox-grid：客户端和服务器之间的道具`className`不匹配

Question

在Next.js中配置react-flexbox-grid和sass时。 面对挑战。

使用最新的create-next-app创建的项目，并且我在.babelrc中没有任何自定义更改

错误

  

index.js：2178警告：道具className不匹配。服务器：   “ col-xs-12 col-md-4 col-lg-2”客户端：“ col-xs-12__flexboxgrid2__AdoKE   col-md-4__flexboxgrid2__3pbbS col-lg-2__flexboxgrid2__1x6vt“

Sass配置看起来像这样：

const sassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]__[name]__[hash:base64:5]'
  }
};

更多：

module.exports = withPlugins(
  [[withSass, sassConfig], [withCss], [optimizedImages, optimizedImagesConfig]],
  nextConfiguration
);

尝试在上面的sass配置中包括和排除flexboxgrid，但还是没有运气。

经过长期研究，我能够通过覆盖localIdentName:[local]来解决此问题，从而使其与客户端和服务器渲染均匹配。不幸的是，如果我使用：localIdentName: '[local]__[name]__[hash:base64:5]'，则由于客户端使用：localIdentName:[local]而失败。那么，如何以及在何处可以像clientIdentName那样覆盖？我们需要和.babelrc一起玩吗？