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

Question

我创建了一个项目使用电子反应样板https://github.com/electron-react-boilerplate/electron-react-boilerplate一切工作，但我决定添加antd (蚂蚁设计)

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";

我查看了下面的存储库，但我不知道如何将它添加到我的项目中。我不想使用这个存储库，因为它工作不正常，而且不使用typescript

谢谢!

Answer 1

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

复制此行

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

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

import './custom.global.scss';

这应该是可行的