未加载样式化组件 - React Typescript Webpack 设置

Question

您好，我是第一次尝试样式化的组件，所以我不知道哪里出了问题，因为我的 webpack 设置很好，而且我的 .babelrc文件。

所以当我阅读 Styled 组件的文档时，他们提到添加这个插件 "babel-plugin-styled-components",

这是我的 .babelrc

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

所以我不会添加 webpack 配置，因为在搜索时我从来没有看到任何将样式组件链接到 webpack 的东西，所以我相信设置是由 .babelrc... 但是如果 webpack 需要配置，请评论，我会添加。

这是我想使用样式化组件的基本组件

import React, { FC } from 'react';
import Styled from 'styled-components';

const Title = Styled.h1`
  color:black;
`;

export const App: FC = () => {
  return (
    <div className="App">
      <h1>Brag Diary</h1>
    </div>
  );
};

样式没做，所以我现在知道我哪里可能出错了，我可以请一些助手

Answer 1

你必须直接引用样式化组件：

import React, { FC } from 'react';
import Styled from 'styled-components';

const Title = Styled.h1`
  color:black;
`;

export const App: FC = () => {
  return (
    <div className="App">
      <Title>Brag Diary</Title>
    </div>
  );
};