Reactjs React样式组件的设置

我无法让样式化的组件工作；一定是我的安排。以下是组件：

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  margin-top: 100px;
`;

const TestComponent = () => (
  <Wrapper>
    TEST
  </Wrapper>
);

export default TestComponent;

我的

.babelrc

：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime", "emotion", "babel-plugin-styled-components"]
}

和我的

webpack.config.js

：

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
  ],
};

---

我们一起在评论中找到了答案，但对于那些在未来遇到困难的人：

---

插件的顺序很重要。在

emotion

之前放置

样式化组件

可以解决冲突，因为emotion插件解析导入声明，并在此基础上发挥其魔力。看<代码>样式化组件插件另一方面解析，但仍然使用导入声明，因此存在冲突。

为什么要将

情感

添加到babelrc？据我所知，您没有使用情感，而且您的package.json中也没有该插件。如果你的node_模块中确实有情感插件，这可能是你出现问题的原因。我有

情感

，因为它是由使用的，我在代码中没有显示。但是，删除它修复了这个问题，因此我将找到其他一些微调器。谢谢如果你把它写成一个答案，我会接受事实上，把

情感

移到

插件

的末尾就足够了

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
  ],
};