Ant-design: 组件 CSS 导入中包含的全局 CSS

创建于 2016-12-21  ·  89评论  ·  资料来源: ant-design/ant-design

感谢这个伟大的图书馆!

我尝试使用babel-plugin-import进行模块化 CSS 导入,但是与单个组件的 css 一起,导入了很多全局 css,这会干扰我现有的样式。 是否可以在不包含全局 CSS 的情况下为单个组件导入 CSS?

谢谢!

🗣 Discussion 🙅🏻‍♀️ WON'T RESOLVE

最有用的评论

不过那是很糟糕的设计。

所有89条评论

你的意思是这样的CSS规则吗?

html,
body {
  ...
}

是的。

现在不导入那些 CSS 规则是不可能的。

https://github.com/ant-design/ant-design/issues/1966#issuecomment -247946641

您现在必须覆盖这些全局样式。


或者您删除 $ babel-plugin-importstyle选项,单独导入较少的文件。

<strong i="12">@import</strong> "~antd/lib/style/themes/default.less";
<strong i="13">@import</strong> "~antd/lib/button/style/index.less";

不过那是很糟糕的设计。

这个问题使这个库很难使用。 特别是在 body 等上有全局属性。我认为这个问题应该更清楚,除非你有计划改变它。

@Forestdev @peitalin这是一个已知问题,但我们没有足够的时间来解决这个问题。

但我们可以在这里继续讨论。

如果我们可以导入重大更改,我们就可以解决这个问题。 例如,将重置中的样式移动到组件的样式:

移动:

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

到:

.ant-btn,
.ant-btn * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
}

为了向后兼容,我们可以提供一个独立的重置样式表。

import 'antd/styles/reset.less'

有这方面的更新吗?

我们可以讨论,但我们现在没有时间应用任何解决方案(如果我们能找到)。

我认为这是一个关键问题,因为没有多少人能负担得起导入全局 css 并覆盖他们现有的样式

这真的很烦人,这阻止了我采用 Antd

这将阻止许多开发人员#

因为ant不能兼容bootstarp,我不得不放弃使用ant。

如何将较少的文件放入一个独立的库中。

顺便提一句。 我在尝试

相关讨论: https ://github.com/palantir/blueprint/issues/244

大家好,我正在研究[email protected]并尝试为全局样式问题寻找解决方案。

我从@benjycui 尝试了import 'antd/styles/reset.less'的解决方案。 事实证明,这将是一个突破性的变化,并使导入样式变得更加复杂,尤其是使用 babel-plugin-import。 所以我决定通过它。

然后我发现这个问题的重点是关于babel-plugin-import它将代码变成:

import Button from 'antd/lib/button';
import 'antd/lib/button/style/css';   // It will import reset styles and hard to override it because it was imported lately!!!

更好的解决方法是不使用 babel-plugin-import 的babel-plugin-import style选项并手动导入样式。

<strong i="17">@import</strong> '~antd/dist/antd.css';

// your global styles
body {
 ...
}

所以我放弃了整个reset.less的想法,只删除了烦人的重置代码,例如: https://github.com/ant-design/ant-design/blob/afce275d25abe958b32cf15ba1f16c49f4fca900/components/style/core/base。少#L33 -L50

我还从bootstrap@v4添加了更好的排版代码来解决 #6162

所有更新现在都在 #7682 中,很快就会合并到 antd-3.0 中。

只需将import 'antd/styles/reset.less更改为import 'antd/styles/typography.less即可。

当用户从[email protected]升级时, import 'antd/styles/typography.less是一个适配器,使迁移变得容易。

当用户是 antd 新手时, import 'antd/styles/typography.less是一个可选功能,所以不用担心冲突。

添加antd/style/v2-compatible-reset.less

+// For 2.x reset compatibility
+//   import 'antd/style/v2-compatible-reset';
+//     or
+//   <strong i="7">@import</strong> '~antd/style/v2-compatible-reset.css';

有人可以解释一些解决此问题的步骤,因为此问题现已关闭。 我正在尝试在 chrome 扩展的内容脚本中使用 antd,但它会弄乱所有网页。

@abhinavzspace你可以安装antd@next来获得 3.0 Alpha 版本,它在一定程度上解决了这个问题,但还没有完全解决。

经过很长时间,我找到了一些对我有用的解决方案。 也许它适用于其他人......

问题是每个组件从style/core/base.less导入一堆全局重置和覆盖(包括 normalize.css),如果这种样式异步加载,它们会覆盖页面样式,从而搞砸一切。

发现添加

import 'antd/lib/style/index.css'
// import 'antd/lib/style'  if you are using LESS

到我的项目的入口点使 webpack 在所有其他样式之前打包重置,因此当加载异步组件时,它不会再次导入/包含重置。

它是否应该为每个组件提供另一个 index.less 。 index.less 可以控制。 并且几乎所有较少的文件都删除@import指令或仅使用@import (参考)

会是一个好的解决方案吗?

啧啧啧。 这个问题应该是“开放的”,以便每个人都知道这是一个已知问题。 只是为了这个而在一个项目中间放弃了 antd。

这是一个真正的无赖。 Ant 被推荐给我,它看起来很有希望,但是这种行为会破坏我们现有的设计,让 Ant 感觉像 Bootstrap。 😦

Ant 应该对自己组件的外观有意见,而不是用户站点的外观。

这个问题意味着 Ant 3 修复了这个问题。 但我仍然看到很多全球风格。 用户应该怎么做才能避免添加这些全局样式?

@openjck我发现这似乎重置了全局样式(我将它添加到我的 React 入口点):

import 'antd/lib/style/v2-compatible-reset';

发现它隐藏在他们的变更日志

我找到了那张纸条,但它对我不起作用。 文档非常稀疏。 你还做了哪些其他与风格相关的导入,按什么顺序?

至于 Ant 样式,仅此而已。 我也在使用style: true设置,这可能很重要。

你看到什么样的全球风格变化?

我正在将 React 与 webpacker 和 rails 一起使用,并且之前遇到过同样的问题。 为了解决这个问题,在我的 HTML 视图中,我在 stylesheet_pack_tag 下添加了现有 CSS 文件名的样式表链接标签,这样就可以了。
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@jhdavids8 ,你在哪里设置style: true ? 我不确定这是否适用于我的设置。

我正在使用 create-react-app。 文档建议将此添加到主要样式表之一:

<strong i="10">@import</strong> '~antd/dist/antd.css';

...但是这样做会引入全局样式更改,例如设置在正文上的字体系列和行高。

我只是使用此处记录的babel-plugin-import来按需导入样式。 style: true选项是一种导入 Sass 源文件的方法(请参阅),我们需要它,因为我们还大量自定义 Ant 主题

我们团队刚刚因为全局样式放弃了 antd 😭 。 我知道你很忙,但如果你能找到解决这个问题的方法,它将从根本上增加 antd 的影响力。

请重新打开此问题。 我仍然看到这种行为,其他人也是如此。

+1

+1

自己添加的全局css,每次都会被打包在/lib/style/index.css的中间位置,我现在只是想去掉antd的
Add the correct display in IE 10-.
后面的
html,
body {
width: 100%;
height: 100%;
}
为什么就这么难呢……自定义的全局css为啥不能放在/lib/style/index.css 的尾部

+1

+1

我发现我能够以@afc163描述的方式解决问题。

通常你会做import 'antd/lib/tabs/style/css'; ,它指向一个只有这个的文件:

'use strict';
require('../../style/index.css');
require('./index.css');

我只想导入 Tabs CSS,所以我将它添加到我的组件文件中:

import 'antd/lib/tabs/style/index.css';

它似乎在不影响页面其余部分的情况下适当地设置了我的选项卡组件的样式。

但是要小心,因为第一种样式的存在是有原因的——也许某些 antd 组件比其他组件更依赖它,这可能并非在所有情况下都有效。

_如果您还没有这样做,请务必从 .babelrc 插件中删除style属性:
[ "import", { "libraryName": "antd" } ] _

希望对某人有所帮助!

这绝对是疯狂的......一个“模块化”组件库,它会干扰全局样式。 我不知道为什么这个库如此受推崇,但它却出现了如此基本的错误。 更不用说他们已经关闭了这张票,好像问题已经解决了。

@strongui babel-plugin-import 对你不起作用?

@abenhamdine不,不是。 从上面的评论来看,我并不孤单。

使用最新版本的 library ,我仍然遇到这个问题。

有没有人找到修复(最好不是重置)?

我已经成功地为我需要的较小组件导入了确切的 CSS

import 'antd/lib/checkbox/style/index.css'

但现在我正在尝试实现一个表。 表格依赖于许多样式,所以我不得不分别导入所有各种 CSS 表,这很好。 _除了_对于排序功能,我需要icon CSS,它在antd/lib/icon中不存在。 相反,我不得不导入主样式表,因为图标 css 只是重定向到它。

import 'antd/lib/style/index.css'

这是影响我应用程序其余部分的文件☝️

至少,你能做到让没有 CSS 表重定向到主要的吗? (就像我需要用于表格排序的icon一样?)

另外, @afc163请重新打开这个问题,它还没有解决。

只需通读线程并查看“WON'T FIX”标签。 这是一个 P0 错误,它阻塞了所有选择 Ant.D 作为其组件库的大型应用程序和嵌入式组件。 标签应该是“心碎”。

@afc163为什么这被标记为无法修复? React 哲学和模块化设计的核心是组件不会渗入其他组件。 这完全没有意义。 我花了一些时间提取了树选择的 css,并且能够在不影响其他任何东西的情况下使其工作,所以我知道这是可能的。

+1 重新打开此问题。 试图将我们的应用从 Material-UI 过渡到 AntD,这是进入的主要障碍。

+1重新开放。 babel-plugin-import对我不起作用,尝试了所有的 tuts 和说明。 无法为我的应用更改全局字体😱

blueprintjs palantir/blueprint#244中有一个相关问题。

一个建议是使用一个名为:css-byebye 的 postcss 插件
https://github.com/AoDev/css-byebye

作为临时解决方案,这可能会有所帮助。

很棒的图书馆,但对待用户的方式很糟糕。 为什么要更改默认字体? 为什么没有办法重置字体和样式?

这让我们——以及从阅读评论中判断出的许多其他人——无法使用这个库。

我不知道这是否是语言/文化问题,但这个库的开发人员 - 请注意:制作一个没人愿意使用的库有什么意义? 为什么你让你的开发人员难以使用你的库?

制作一个没人愿意使用的库有什么意义? 为什么你让你的开发人员难以使用你的库?

请保持适度。
许多开发人员和初创公司使用或想要使用这个库。

这个库是开源和免费的。 如果您不想使用它,请不要使用它。
如果你想修改它,你可以 fork 自己使用或提交 PR,ant-design 的维护者愿意贡献。

所以没必要在这里吐槽。

这个问题对我的团队来说也是一个交易破坏者。
我们喜欢这个项目,以及所做的所有工作,但是这个单一的问题阻止了我们使用它。

这就是为什么我仍在关注这个问题,希望它在不久的将来重新修复。

哦,我很温和。 我不是在这里咆哮。

我提请您注意,您的库 - 即使它很棒 - 也不应该有不必要的副作用。 想象一下,如果我使用 MomentJS(例如),它开始在克林贡语中显示日期和时间!

“自己去分叉”也不是答案。 事实上,这是许多开源项目的悲哀和可悲的状态。

我们正在自己构建复杂的系统——我们在这里不是新手。 我们想使用图书馆并继续我们的生活。 至少应该有一种方法可以要求库不要更改默认字体或字体大小。 这就是我——也许这里的其他人——都在问。

你可以选择装聋作哑并忽略这些担忧——集中注意力而不是选择我的话——或者你可以选择理解这里的人在说什么,并为他们提供一种使用你的库而没有任何副作用的方法。

当你长寿和繁荣时,愿力量与你同在。

完全同意@kotpal 。 令我惊讶的是,这个讨论不是关于“你能添加这个功能吗?”或者“如果......不是很好”,它实际上是在试图说服作者一个组件不应该与全局混淆状态。 从字面上看,它是 ReactJS 和任何模块化设计的核心概念的空白。

除非您提供全局主题或其他内容,否则您不会弄乱 GLOBAL 任何东西。

我明白@abenhamdine在说什么。 但我也同意@strongui

也许 Ant 应该是一个完整的体验。 但在实践中,许多人仍然需要使用他们无法更改的遗留代码。 如果这个项目与旧代码发生冲突,我们首先会失去使用 React(或任何其他类似框架)的所有好处。

如果这个问题阻止了这么多人完全采用该项目,也许我们可以齐心协力并为它提供赏金或其他什么?

我知道我没有知识或时间自己解决这个问题,那么贡献者需要什么来解决它? (是的,这是一个问题,而不是一个功能)

我在覆盖 antd 提供的全局 css 和使用样式化 jsx 等项目方面取得了一些成功。
您可以在这里看到部署的站点! ps:工作正在进行中。

我刚刚发现自己处于同样的情况,并且使用@inverts@corinnebrady描述的相同方法取得了一定的成功(https://github.com/ant-design/ant-design/issues/4331#issuecomment -361421192 和 https://github.com/ant-design/ant-design/issues/4331#issuecomment-365481037)。 所以,我的一些组件看起来像这样:

// ...
import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/index.css'

import AutoComplete from 'antd/lib/auto-complete'
import 'antd/lib/auto-complete/style/index.css'

import Form from 'antd/lib/form'
import 'antd/lib/form/style/index.css'
import 'antd/lib/select/style/index.css'

import Button from 'antd/lib/button'
import 'antd/lib/button/style/index.css'
// ... etc

这对大多数 antd 组件都适用,但有些组件没有与之关联的特定 css 文件,它的样式只能在全局文件中找到。 icon组件就是这种情况,为了使它们工作,我必须手动将所有与图标相关的样式从全局文件复制到我自己的样式表中。 维护者:你会接受包含antd/lib/icon/style/index.css的 PR 吗?

似乎您也可以包含单个较少的文件,例如import 'antd/lib/spin/style/index.less'

有计划正式解决这个问题吗?

仍然是一个问题,但我正在尝试使用@reyronald解释的引用导入来修复。

我也被Icon的风格问题所困扰。

@reyronald你能做个公关吗?

遭受这种痛苦的人可能想通过直接从存储库添加包来尝试我的 fork

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

或者

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

我只排除了 base.less 并在没有任何其他修改的情况下构建了它。 它适用于我的情况,我不使用它的许多组件。 它可能会破坏某些组件的外观,特别是如果您的项目中还没有健全的重置样式表。 #4546

@afc163我也想跳到这里并添加额外的声音来解决这个问题。 我们构建了一个包含许多目标的大型应用程序,并且我们的一些目标加载到了 3rd 方站点上。 antd干扰全局 CSS 对我们来说是个问题,因为我们最终会破坏那些 3rd 方网站的 CSS 重置和字体。 我们喜欢这个库,如果维护者愿意为我们指明方向,我们很乐意为修复做出贡献。 请重新打开或将对话指向另一个未解决的问题! 谢谢

所以我们能够通过使用一些 webpack 操作来加载一个备用的 less 文件来实现这个工作(至少到目前为止):

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

src/style.less文件加载与index.less文件相同的文件,但在顶级选择器的范围内加载它们:

#root { <strong i="11">@import</strong> '~antd/lib/style/core/index.less'; <strong i="12">@import</strong> '~antd/lib/style/themes/default.less'; }

结果是所有“全局”样式都在#root范围内应用:

`#root 文章,

根除,

根对话框,

根图标题,

根图,

根页脚,

根标头,

根 hgroup,

根主线,

根导航,

根部分{

显示:块;
}
`
等等...

希望这对某人有帮助。

人,真的很烦。 这种样式行为不是您对世界级 UI 库所期望的。

至少在文档中提到全局重置,这样人们就不会感到困惑。 或者,一些关于导入单个样式和图标的指南“集成在遗留网站中”可能会有所帮助

我认为维护者在这个问题关闭后已经取消订阅,因为他们没有参与讨论,所以我们可能不会在这个问题上得到任何官方支持,除非我们打开一个新问题,直接 ping 他们或打开一个 PR。

终于找到了一种方法来规避这个问题,方法是在原始 antd.css 的基础上生成一个新的 CSS 文件,每个规则都以自定义类为前缀。 我的解决方案使用 PostCSS、Gulp 和postcss-prefixwrap插件:

https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa

它远非完美,但效果出奇的好。 至少满足我的需要;-)

gist 还包含一个现成的antd CSS 版本,前缀为.antd-ns (“ns”是“namespace”的简写)

笔记:
对我来说一个重要的要求是它是自动化的,因此可以很容易地为每个新的 ant 版本生成前缀 CSS。

  • 它的目的只是作为创建前缀 CSS 的工具; 因此它可以从与您的项目分开的不同文件夹中运行。 您的基于 antd 的项目无需包含 PostCSS 或 Gulp! 生成的 CSS 只需放在项目的静态 CSS 文件夹中(如果相应配置,则由 Gulp 完成)。
  • postcss-prefixwrap必须至少是 1.3.0 版本,其中包括我的补丁以保留antd关键帧动画

评论/反馈总是很感激!

感谢@dbtedman使用他的精美 PostCSS postcss-prefixwrap插件使这成为可能。

评论/反馈赞赏!

我终于找到了一种方法来规避这个问题,方法是在原始 antd.css 的基础上生成一个新的 CSS 文件,每个规则都以自定义类为前缀。

恕我直言,这是最直接的解决方案。
就个人而言,我目前不需要这个,但如果有人提交 PR 以在 less 文件中的每个 css 规则之前添加一个类名 less 变量(例如.@{scope} ),这对每个人都是有益的。

默认情况下,此变量为空,以避免破坏当前行为。

只需使用例如antd设置变量来隔离样式。

我认为这个解决方案对于维护者来说是可以接受的,并且可以继续前进。

这是一个对我有用的解决方法。 我创建了styles.less文件

// Doing what antd/lib/style/core/index.less does
// but without loading "base" which overwrites global styles
<strong i="7">@import</strong> '~antd/lib/style/mixins/index.less';
<strong i="8">@import</strong> '~antd/lib/style/core/iconfont.less';
<strong i="9">@import</strong> '~antd/lib/style/core/motion.less';

<strong i="10">@import</strong> '~antd/lib/menu/style/index.less';
<strong i="11">@import</strong> '~antd/lib/dropdown/style/index.less';
<strong i="12">@import</strong> '~antd/lib/button/style/index.less';
<strong i="13">@import</strong> '~antd/lib/checkbox/style/index.less';
<strong i="14">@import</strong> '~antd/lib/grid/style/index.less';

.babelrc我有:

  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": false,
      }
    ]
  ]

用于优化 JS 构建大小,如https://ant.design/docs/react/getting-started#Import -on-Demand 和https://github.com/ant-design/babel-plugin-import中所述

对于自定义样式,我将 webpack 配置更改为:

module: {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader'
    }, {
      loader: 'css-loader'
    }, {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: {"primary-color": "#ed1c24"},
      }
    }]
  }]
}

如 https://ant.design/docs/react/customize-theme#1)-Using-theme-property-(recommended-way) 中所述

顺便说一句:我尝试使用new webpack.IgnorePlugin(/style\/core\/base/)从处理中忽略这个“base.less”文件,但我无法让它工作。 我不知道为什么。 我的假设是因为它是用 LESS 处理的,而不是直接用 Webpack 处理的。

为了它的价值,我手动编辑了 antd.css,并且能够在不破坏我使用的任何 antd 组件的情况下删除不需要的样式。

@paneq我目前也在做同样的事情。 注意babel-plugin-import的样式选项也可以是一个函数,它可以决定是否应该包含一个样式。 我只是没有让它工作。 将不得不调试...
也许我也误解了这个选项?

@paneq我已经复制了你所做的事情,到目前为止它似乎已经奏效,但我没有尝试足够的组件来查看哪些组件需要全局css。 谢谢

@vthinkxie

嗨,应该可以尝试匹配所有元素,从 .ant 开始,并为它们分配样式

*[class^='ant-']{
box-sizing:边框框;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 移除移动 safari 的点击高亮颜色
}

它应该具有跨浏览器兼容性,并且不应该花费很长时间来实现。

所以我们能够通过使用一些 webpack 操作来加载一个备用的 less 文件来实现这个工作(至少到目前为止):

new webpack.NormalModuleReplacementPlugin( /node_modules\/antd\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/styles.less') ),

src/style.less文件加载与index.less文件相同的文件,但在顶级选择器的范围内加载它们:

#root { <strong i="12">@import</strong> '~antd/lib/style/core/index.less'; <strong i="13">@import</strong> '~antd/lib/style/themes/default.less'; }

结果是所有“全局”样式都在#root范围内应用:

您使用的是哪个版本的 less-loader? 似乎它只适用于 3.0.0? 看。 例如https://github.com/webpack-contrib/less-loader/issues/184

另外,您使用的是哪个版本的 antd 来解决此问题? 我问的原因是即使使用[email protected][email protected]也没有成功(更改后 webpack 有问题解决)。 ..

我不知道这是否对任何人有帮助,但以下帮助我仅为正在使用的组件导入 CSS:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

我不知道这是否对任何人有帮助,但以下帮助我仅为正在使用的组件导入 CSS:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

是的,这似乎适用于许多组件。 不过,您的里程可能会有所不同——至少 Select 需要的不仅仅是组件自己的样式。 选择中的“删除”图标不会以其他方式呈现; 我没有时间完全追查这个问题,但我可能是次要的。 因此,您可能需要从某些组件的主要样式中模仿一些样式。

虽然这个选项不是很完美,但它可以很好地适用于许多组件。 自定义样式存在更新中断的风险,但您显然可以控制何时进行更新。

我为我们的组织找到的最佳解决方案是包含来自 antd 的整个 CSS 表,并去掉任何影响非 antd 命名样式的样式。 里程可能会有所不同,现在导入的_every_风格显然有缺点。 但它运作良好,并且在这样做大约两个月后我还没有看到任何问题。

@jaleikas
您是否找到了解决方法? 据我所知,[email protected] 的问题仍未解决,因此建议的NormalModuleReplacementPlugin修复不起作用。 该解决方案实际上似乎是最好的解决方案,因为可以手动覆盖和限定范围。
我尝试了和你一样的事情,降级了 less-loader,但是 webpack resolve 不起作用。

在这里使用[email protected]

遭受这种痛苦的人可能想通过直接从存储库添加包来尝试我的 fork

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

或者

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

我只是丢弃了基础并在没有任何其他修改的情况下构建了它。 它适用于我的情况,我不使用它的很多组件。 它可能会受到某些组件的影响,特别是如果您的项目中还没有合理的重置样式表。 #4546

这对我有用

遭受这种痛苦的人可能想通过直接从存储库添加包来尝试我的 fork

yarn add github:serguzest/ant-design#3.4.1-NoCssPollution

或者

npm install github:serguzest/ant-design#3.4.1-NoCssPollution

我只排除了 base.less 并在没有任何其他修改的情况下构建了它。 它适用于我的情况,我不使用它的许多组件。 它可能会破坏某些组件的外观,特别是如果您的项目中还没有健全的重置样式表。 #4546

感谢您提供此解决方案!

您找到解决方法了吗?据我所知, [email protected]的问题仍未解决,因此建议的 NormalModuleReplacementPlugin 修复不起作用。该解决方案实际上似乎是最好的解决方案,因为可以手动覆盖和限定范围。

我选择停止使用 antd,并决定选择一些无样式的组件(如 rc-switch)。问题是大多数“无样式”组件要么非常糟糕/没有记录,而且其中一些似乎也表现不同,所以在大多数情况下,我放弃了并在别处寻找......

嗨,应该可以尝试匹配所有元素,从 .ant 开始,并为它们分配样式

*[class^='ant-']{
box-sizing:边框框;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 移除移动 safari 的点击高亮颜色
}

它应该具有跨浏览器兼容性,并且不应该花费很长时间来实现。

@tylik1 ,谢谢! 我只需要修复字体系列以匹配我的电子应用程序的其余部分。 这完全救了我。

我不知道这是否对任何人有帮助,但以下帮助我仅为正在使用的组件导入 CSS:

import Modal from 'antd/lib/modal'
import 'antd/lib/modal/style/css'

它通过以下方式为我工作。

import Icon from 'antd/lib/icon';
import 'antd/lib/icon/style/index.css';

不幸的是,这是一个表演障碍。 即使日期选择器是迄今为止我能找到的最好的,我也不会实现 Antd。

我们目前正在为我们公司寻找一个反应组件库,这对我们来说也是一个阻塞问题,因此我们可能不使用 ant。

我们也在研究 react MUI,它有很好的主题选项,也许你可以看看他们是如何做到的并实现类似的东西。

我用https://www.npmjs.com/package/patch-package注释掉

// import 'normalize.css/normalize.css';

antd-mobile/es/style/index.js
我的目的是构建next.js ,所以在我的例子中,我只是在我的标题中包含了一个 CND 链接。

那是 2020 年,人类灭绝了,冠状病毒,蚂蚁设计为项目添加了全球风格......

跟踪 #9363

此页面是否有帮助?
0 / 5 - 0 等级