nextjs+antd时使用Row组件报Prop `style` did not match警告。

Question

在写一个小博客时发生的问题

项目使用NextJS + Antd + styled-components，

配置了.babelrc如下：

{
  "presets": ["next/babel"],
  "plugins": [
    "babel-plugin-styled-components",
    [
      "import",
      {"libraryName": "antd"}
    ]
  ]
}

发生问题的地方：

export const Header = () => (
  <HeaderWrapper>
    <Row type="flex" justify="center">
      <Col xs={24} sm={24} md={10} lg={15} xl={12}>
        <span className="header-logo">Header Logo</span>
        <span className="header-txt">Header Txt</span>
      </Col>

      <Col className="menu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
        <Menu mode="horizontal">
          <Menu.Item key="home">
            <HomeOutlined />
            首页
          </Menu.Item>
          <Menu.Item key="video">
            <YoutubeOutlined />
            视频
          </Menu.Item>
          <Menu.Item key="life">
            <SmileOutlined />
            生活
          </Menu.Item>
        </Menu>
      </Col>
    </Row>
  </HeaderWrapper>
);

经过排查是在引用Row + Col时报的警告：

查了相当多的博客、帖子，都说是没有babel-plugin-styled-components引起的，然而我已经在项目中使用并配置了。请问这个警告是如何引起的？该如何解决呢？

Answer 1

看了一个国外网站的回答，说是把.babelrc.json重命名为babel.config.json就可以解决这个问题。