如何在电子反应样板中使用 antd？答案

【问题标题】：how to use antd in electron react boilerplate?如何在电子反应样板中使用 antd？
【发布时间】：2021-09-29 02:36:41
【问题描述】：

我使用电子反应样板创建了一个项目 https://github.com/electron-react-boilerplate/electron-react-boilerplate 一切正常，但我决定添加 antd (ant design)

yarn add antd

然后我导入 antd 样式

index.tsx

...
import "./styles/global.css";
import "./styles/fonts.css";

import "antd/dist/antd.css"
...

接下来我使用了primary类型的按钮

some_component.tsx

import React from "react";
import s from './someComponent.module.scss'
import { Button } from "antd";

export const SomeComponent: React.FC = () => {
  return <div className={s.root}>
    <Button type={'primary'}> button text </Button>
  </div>
}

但按钮的样式保持不变（使用标准样式）

我尝试将组件样式直接导入到我的 global.css 中，也尝试添加到组件样式中，但这并没有改变任何东西

@import "~antd/dist/antd.css";

我已经查看了以下可以运行的存储库，但是我不知道如何将它添加到我的项目中。我不想使用这个存储库，因为它工作不正常并且不使用打字稿

谢谢！

【问题讨论】：

我在等待答复
等待中......

标签： reactjs electron antd

【解决方案1】：

您可以在 App.global.css 中添加此导入或创建新的 custom.global.scss

复制这一行

@import '~antd/dist/antd.css';

然后将此 scss 导入您的 App.tsx

import './custom.global.scss';

这应该可行

【讨论】：