Question

您好，我对此警告有疑问：道具parseInt('0') // 0 parseInt('') // NaN parseInt('false') // NaN不匹配。问题。我还有其他问题，很多人说我们可以使用babel-plugin-styled-components解决这个问题，但是我解决不了。

这是我的_app.js

className

和next.config.js

import React from 'react';
import Head from 'next/head';
import PropTypes from 'prop-types';
import AppLayout from '../components/AppLayout';
import '../styles/antd.less'

const Class101 = ({ Component }) => {
  return (
    <>
      <Head>
        <title>Class101</title>
      </Head>
      <AppLayout>
        <Component />
      </AppLayout>
    </>
  );
};

Class101.propTypes = {
  Component: PropTypes.elementType.isRequired,
};

export default Class101;

package.json

const withLess = require('@zeit/next-less');

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => {};
}

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
});

.babelrc

{
  "name":
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "author":
  "license": "MIT",
  "dependencies": {
    "@ant-design/icons": "^4.2.2",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^4.6.4",
    "less": "^3.12.2",
    "next": "^9.5.3",
    "next-plugin-antd-less": "0.0.6",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass": "^1.26.10",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^1.11.1",
    "eslint": "^7.9.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.2",
    "webpack": "^4.44.1"
  }
}

我发现.babelrc文件更改是那样的，但我无法解决此问题。我该如何解决？

这样的样式文件

{
  "presets": [
    "next/babel"
  ],
  "plugins" : [
      [
        'import',
        {
          libraryName: 'antd',
          style: true,
        },
      ]
    ],
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

警告：道具“ className”不匹配。 React + NEXT JS + ANTD

0 个答案: