Ant-design: 删除全局样式

您也可以尝试直接从https://github.com/react-component使用组件
antd建立在它们之上，并且它们没有样式。

请解决这个问题。 这对我们的应用程序来说是一个硬块。

嗨，你们有没有想过使用 CSS-in-JS 库，比如情感或样式组件。 它可以解决很多问题，例如样式的全局导入和将样式范围限定到 ant 组件。 此外，它还可以改进主题（动态样式）。 抱歉，如果这已经在其他地方讨论过，我找不到相关的讨论。

@divyanshu013我想我读到这对他们来说不是首要任务，因为 antd 旨在包含 antd 样式规范，而不仅仅是组件/javascript。 另外，这在技术上意味着成为他们内部项目的单一仓库，因此其他人品牌的主题自然不是首要任务。 也就是说，我和你在一起，我希望它使用样式组件而不是全局样式。

https://github.com/ant-design/ant-design/issues/5570#issuecomment -306960517

https://spectrum.chat/thread/ca82a625-134f-49df-9900-1b0b6342e037

好吧，我必须承认我没有深入研究过 antd 的 less 文件结构，所以也许有人可以对此有所了解：

仅包含组件的 less 文件有多大的冒犯性？ 例如做类似的事情

从'antd'导入{选择}；
导入 'antd/lib/select/style/index.less';

基于快速测试，它似乎有效，所以这让我很好奇......
我确信这会因更新而中断，但其他解决方案似乎也有风险。

这与能够为单个组件导入样式有关。 如果组件的样式是自包含的，那么人们可以选择加入或退出全局重置/样式。

现在的情况：

• 删除全局重置和样式是不可行的，因为这将是一个重大更改。
• 为单个组件导入样式目前不起作用，因为它们有时具有隐藏的依赖关系，并且依赖于全局样式。

我们如何使组件以不间断的方式自包含？ 我认为一种解决方案可能是使用Storybook来设置一些孤立的视觉回归测试。

您可以生成包含全局样式的快照，然后删除全局样式，并在 componentless 文件中添加样式，直到测试通过，确保样式与全局样式相同。

参考 #4331 #13459

_为创建半重复问题道歉。 为了巩固对话，我将在这里重新提出我有些不同的问题。_

如果社区可以完成将组件样式转换为不再依赖全局样式的工作怎么办？

一种方法（感谢@DylanVann）：

1. 为所有组件添加自动视觉回归测试
2. 重构组件样式，以非全局方式使用以前的全局样式
   
   
   
   • 我喜欢[class="ant-"] { ... }方法，但这里可能有很多选择
   
   
3. 确认没有对组件进行重大更改
4. 为依赖它的人提供当今具有全球风格的 base.less 作为选择导入

Ant 是否开放给：

1. 审查并可能接受该工作的 PR(s)？
2. 接受为那些目前依赖全球风格的消费者提供选择加入的妥协吗？

任何更新？

你好呀！
我通过以不同的方式导入组件样式解决了这个问题。

最初我正在导入这样的样式：
import 'antd/lib/button/style/css';

但是css.js不仅导入按钮的样式，还导入通用样式，这是它的内容：

"use strict";

// General styling (body, h1, h2..)
require("../../style/index.css");

// Button styles
require("./index.css");

所以我通过像这样导入index.css文件来解决它：
import 'antd/lib/button/style/index.css';

不错的发现！

是否有更复杂的组件依赖于多个index.css文件？
如果没有主要的通用样式文件，是否有组件会损坏？

不错的发现！

谢谢😄

是否有更复杂的组件依赖于多个index.css文件？

也许，在那种情况下，我会导入所有文件，我认为不会太多。

如果没有主要的通用样式文件，是否有组件会损坏？

它适用于按钮（我使用的唯一组件）。
但也许某些组件可以使用这些样式，这是我需要检查的。

我以与@fedebabrauskas相同的方式进行

@fedebabrauskas似乎没有启用组件的动画（我试过 Popover，样式很好，但没有动画）

好吧，我必须承认我没有深入研究过 antd 的 less 文件结构，所以也许有人可以对此有所了解：

仅包含组件的 less 文件有多大的冒犯性？ 例如做类似的事情

从'antd'导入{选择}；
导入 'antd/lib/select/style/index.less';

基于快速测试，它_似乎_可以工作，所以这让我很好奇......
我确信这会因更新而中断，但其他解决方案似乎也有风险。

这是救命稻草！
我一直在使用import 'antd/dist/antd.css'; 在组件内部，这弄乱了全局样式。
在谷歌上搜索，发现了这个问题。
我只需要 switch 组件的样式，所以我尝试import 'antd/lib/switch/style/index.less'; 和繁荣！ 有效！！
非常感谢朋友！！
代码实现
已部署的投资组合

所以，只是为了确认，截至今天，不可能不导入index.css ？

我正在使用 Gatbsy，我的global.css被蚂蚁index.css覆盖。

作为一种解决方法 - 我刚刚创建了一个像下面这样的安装后脚本

scripts/postinstall.js

#!/usr/bin/env node
const replace = require('replace-in-file');

const removeAntdGlobalStyles = () => {
    const options = {
        files: [`${process.cwd()}/node_modules/antd/lib/style/core/index.less`, `${process.cwd()}/node_modules/antd/es/style/core/index.less`],
        from: "<strong i="8">@import</strong> 'base';",
        to: '',
    };

    replace(options)
        .then(() => {
            console.log('[INFO] Successfully Removed Antd Global Styles:');
        })
        .catch(e => {
            console.error('[ERR] Error removing Antd Global Styles:', e);
            process.exit(1);
        });
};


removeAntdGlobalStyles();

package.json

 "devDependencies": {
  //other dependancies
  "replace-in-file": "^5.0.2"
},
"scripts": {
  // other scripts
  "postinstall": "node scripts/postintall.js"
}

注意：我使用babel-plugin-import进行按需组件导入

作为一种解决方法 - 我刚刚创建了一个像下面这样的安装后脚本

scripts/postinstall.js

#!/usr/bin/env node
const replace = require('replace-in-file');

const removeAntdGlobalStyles = () => {
    const options = {
        files: [`${process.cwd()}/node_modules/antd/lib/style/core/index.less`, `${process.cwd()}/node_modules/antd/es/style/core/index.less`],
        from: "<strong i="9">@import</strong> 'base';",
        to: '',
    };

    replace(options)
        .then(() => {
            console.log('[INFO] Successfully Removed Antd Global Styles:');
        })
        .catch(e => {
            console.error('[ERR] Error removing Antd Global Styles:', e);
            process.exit(1);
        });
};

removeAntdGlobalStyles();

package.json

 "devDependencies": {
  //other dependancies
  "replace-in-file": "^5.0.2"
},
"scripts": {
  // other scripts
  "postinstall": "node scripts/postintall.js"
}

该脚本删除了基本样式，但仍然没有摆脱全局 antd 样式。 你是为每个 antd 组件还是单个 dist css 文件导入样式。

@himanshuc3我正在使用babel-plugin-import进行按需组件导入

@fedebabrauskas似乎没有启用组件的动画（我试过 Popover，样式很好，但没有动画）

同样的情况，但折叠

babel-plugin-import导入全局样式，
并导入一个特定的组件 css 文件，如下所示：
import 'antd/lib/date-picker/style/index.css';
打破日期选择器（它以奇怪和意想不到的方式打开和关闭自己。）

任何解决方法？

天哪，我正在使用依赖于许多其他组件的传输组件......现在意识到我所有的深色排版标题都没有遵循我的原色等。

+1

+1

这是我在演示应用程序中使用的解决方法，该应用程序使用 Ant Design 和其他组件库：

index.scss ：

.antPage {
  <strong i="8">@import</strong> '~antd/dist/antd.min';
  ...
}

所以现在 Ant 的所有全局样式都是命名空间的，我可以在我的 Ant 样式页面上执行此操作：

function AntPage() => <div className="antPage">...</div>

但是后来我遇到了另一个问题，因为这个库提供的一些组件无法真正处理命名空间样式:(

例如， DatePicker渲染正文的标记 _outside_，因此生成的组件不在.antPage ，因此样式不起作用。 下拉菜单和其他需要额外标记才能工作的组件也是如此。

然后，如果我尝试上面建议的解决方法：

import 'antd/es/date-picker/style/index.css'
import 'antd/es/dropdown/style/index.css'
import 'antd/es/input/style/index.css'

它_几乎_有效，但它开始表现得很奇怪：当我聚焦日期选择器时，它没有出现，而是保留在opacity: 0 。 然后，一旦它失去焦点，浮动日期选择器就会出现...... 😕

不确定单独加载样式会如何影响行为，这可能是一个不同的错误。

无论如何，让我们看看非全局样式版本是否可以永久有效：+1：

@OscardR我相信这个问题与不包括运动 css 文件<strong i="6">@import</strong> 'antd/es/style/core/motion.less';为我修复它有关。

如果其他人有类似的问题并想导入所有样式但没有全局变量：

我已经导入了所有.less文件并将它们放入一个antd.less文件中，然后我导入该文件而不是包含全局样式的 dist 文件。

https://gist.github.com/SPDUK/b93e9c28c11e41d5f3b6d9ad9fc7be36

如果我不是一个较少的用户，我们是否还有其他选择？ 我正在使用 sass 并且不想添加更少的东西来修补它。 我希望能够只加载最少的 css 文件来执行 Select 组件

我在 Github 主页上看到这个问题已经快 3 年了。

我已经停止使用 ant 很长时间了。 我可以关闭它并让社区或维护人员在其他地方跟进吗？

任何关于Remove global Styles事情，现在大家都在关注这个，如果不想了解更多，请只关注unsubscribe这个问题，谢谢！

我不认为这是最好的主意。 我们中的很多人仍在使用 antd，并希望解决这个问题。
有一个主要问题将所有历史记录都很好。