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

张晓文
  • 0
新手上路,请多包涵

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

项目使用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时报的警告:
image

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

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

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏