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-importのstyleオプションを削除し、より少ないファイルを個別にインポートします。

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

しかし、それはひどいデザインです。

この問題により、このライブラリの操作が非常に困難になります。 特にボディなどにグローバルなプロパティを持っている。これを変更する計画がない限り、この問題はもっと明確にされるべきだと思う。

@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の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のような迷惑なリセットコードを削除します。 less#L33 -L50

また、#6162を解決するために、 bootstrap @ v4からより良いタイポグラフィコードを追加しました

すべてのアップデートは現在#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を使用しようとしていますが、すべてのWebページが混乱しています。

@abhinavzspaceでは、 antd@nextをインストールして3.0 Alphaビルドを取得できます。これにより、この問題はある程度解決されますが、完全には解決されません。

長い時間の後、私は私のために働くいくつかの解決策を見つけました。 多分それは他の人のために働く...

問題は、各コンポーネントが一連のグローバルリセットとオーバーライド(normalize.cssを含む)をstyle/core/base.lessからインポートすることです。このスタイルが非同期で読み込まれると、すべてを台無しにするページスタイルがオーバーライドされます。

追加することがわかりました

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

プロジェクトのエントリポイントに移動すると、webpackは他のすべてのスタイルよりも先にリセットをパックするため、非同期コンポーネントが読み込まれるときに、リセットが再度インポート/インクルードされることはありません。

コンポーネントごとに別のindex.lessを与える必要がありますか。 index.lessを制御できます。 また、ほとんどすべてのファイルが@importディレクティブを削除するか、 @ import (参照)を使用します

それは良い解決策になるでしょうか?

tsk tsktsk。 この問題は「オープン」である必要があります。これにより、これが既知の問題であることを誰もが知ることができます。 このためだけに、プロジェクトの途中でantdを捨てました。

これは本当に残念です。 Antが私に勧められ、それは有望に見えますが、この動作は既存の設計を台無しにし、AntをBootstrapのように感じさせます。 😦

Antは、ユーザーのサイトの外観ではなく、独自のコンポーネントの外観について意見を述べる必要があります。

この問題は、Ant3がこの問題を修正することを意味します。 しかし、私はまだたくさんのグローバルなスタイルを見ています。 これらのグローバルスタイルを追加しないようにするには、ユーザーは何をすべきですか?

@openjckこれでグローバルスタイルがリセットされるようです(Reactエントリポイントに追加しました):

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

それが彼らのチェンジログに埋もれているのを見つけた

そのメモを見つけましたが、うまくいきませんでした。 ドキュメントはかなりまばらです。 他にどのようなスタイル関連のインポートを行いましたか?また、その順序は?

Antスタイルに関しては、それだけです。 私もstyle: true設定を使用していますが、これは問題になる可能性があります。

どのようなグローバルスタイルの変化が見られますか?

私はReactをwebpackerとrailsで使用していますが、以前は同じ問題がありました。 これを解決するために、HTMLビューで、既存のCSSファイル名のスタイルシートリンクタグをstylesheet_pack_tagの下に追加します。これで機能します。
= javascript_pack_tag 'root'
= stylesheet_pack_tag 'root'
= stylesheet_link_tag 'application'

@ jhdavids8 、 style: trueをどこに設定しますか? それが私の設定に当てはまるかどうかはわかりません。

create-react-appを使用しています。 ドキュメントでは、これをメインのスタイルシートの1つに追加することを推奨しています。

<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を削除したいだけです。
IE10で正しい表示を追加します。
戻る
html、
体 {
幅:100%;
高さ: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いいえ、そうではありません。 そして、上記のコメントで判断するのは私だけではありません。

最新バージョンのライブラリを使用していますが、まだこの問題が発生しています。

誰かが修正を見つけましたか(理想的にはリセットではありません)?

必要な小さなコンポーネントの正確な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'TFIX」タグを確認してください。 これはP0のバグであり、Ant.Dをコンポーネントライブラリとして選択するすべての大規模なアプリケーション、埋め込みコンポーネントをブロックします。 タグは「ハートブレイキング」である必要があります。

@ afc163なぜ世界でこれは修正されないとマークされているのですか? 反応哲学とモジュラー設計の中核は、コンポーネントが他のコンポーネントにブリードしないようにすることです。 これはまったく意味がありません。 私はしばらく時間をかけてツリー選択用のcssを抽出し、他に影響を与えることなく機能させることができたので、それが可能であることを知っています。

この問題を再開するための+1。 アプリをMaterial-UIからAntDに移行しようとすると、これが参入障壁になります。

再開するには+1。 babel-plugin-importは私にはうまくいきません、すべてのtutsと指示を試しました。 アプリのグローバルフォントを変更できません😱

blueprintjs palantir / blueprint#244に関連する問題がありました。

1つの提案は、css-byebyeと呼ばれるpostcssプラグインを使用することです。
https://github.com/AoDev/css-byebye

これは一時的な解決策として役立つ場合があります。

素晴らしいライブラリですが、ユーザーを扱うための恐ろしい方法です。 デフォルトのフォントを変更する必要があるのはなぜですか? そして、なぜフォントとスタイルをリセットする方法がないのですか?

これにより、私たち(およびコメントを読むことから判断する他の多くの人)がこのライブラリを使用できなくなります。

これが言語/文化の問題であるかどうかはわかりませんが、このライブラリの開発者は注意してください:誰も使いたくないライブラリを作成することのポイントは何ですか? なぜあなたはあなたの仲間の開発者があなたのライブラリを使うのを難しくしているのですか?

誰も使いたくないライブラリを作る意味は何ですか? なぜあなたはあなたの仲間の開発者があなたのライブラリを使うのを難しくしているのですか?

適度に保ってください。
多くの開発者やスタートアップは、このライブラリを使用しているか、使用したいと考えています。

このライブラリはオープンソースで無料です。 使いたくない場合は使わないでください。
変更したい場合は、自分で使用するためにフォークするか、PRを送信できます。ant-designのメンテナは寄付を受け付けています。

したがって、ここで暴言を吐く必要はありません。

この問題は、私のチームにとっても大きな問題です。
私たちはこのプロジェクトと行われたすべての作業が大好きですが、この1つの問題のためにプロジェクトを使用できません。

そのため、近い将来に修正が再開されることを期待して、この問題を引き続きフォローしています。

ああ、私はとても穏健です。 そして、私はここで暴言を吐いていません。

あなたのライブラリは、たとえそれが素晴らしいとしても、不必要な副作用を持ってはならないことに注意を向けています。 たとえば、MomentJSを使用して、クリンゴン語で日付と時刻の表示を開始するとします。

「自分でフォークする」も答えではありません。 実際、それは多くのオープンソースプロジェクトの悲しく哀れな状態です。

私たちは自分たちで複雑なシステムを構築しています-私たちはここでは新人ではありません。 私たちは図書館を利用して生活を続けたいと思っています。 少なくとも、デフォルトのフォントやフォントサイズを変更しないようにライブラリに依頼する方法があるはずです。 それが私(そしてここにいる他の人たち)が求めているすべてです。

あなたは耳が聞こえないことを選択し、これらの懸念を無視することができます-私の言葉の選択の代わりに集中する-またはあなたはここの人々が言っ​​ていることを理解し、副作用なしにあなたのライブラリを使用する方法を提供することを選択できます。

あなたが長生きして繁栄している間、力があなたと共にありますように。

@kotpalにこれ以上同意できませんでした。 この議論が「この機能を追加できますか」や「素敵じゃないか」ではなく、文字通り、コンポーネントがグローバルに干渉してはならないことを作者に納得させようとしていることに驚かされます。州。 ReactJSのコアコンセプトとモジュラーデザインは文字通りポイントブランクです。

グローバルなテーマなどを提供している場合を除いて、グローバルなものをいじらないでください。

@abenhamdineが言っていることがわかります。 しかし、私も@stronguiに同意します。

たぶん、Antは全体の経験になるはずです。 しかし実際には、多くの人はまだそれを変更できないレガシーコードで作業する必要があります。 そして、このプロジェクトがその古いコードと衝突した場合、そもそもReact(またはそのような他のフレームワーク)を使用することのすべての利点が失われます。

この問題が非常に多くの人々がプロジェクトを完全に採用するのを妨げているのなら、私たちは一緒になってプロジェクトに賞金をかけることができるでしょうか?

この問題を自分で修正する知識や時間がないことを知っているので、寄稿者が修正するには何が必要ですか? (はい、それは問題であり、機能ではありません)

antdによって提供されるグローバルcssをオーバーライドし、スタイル付きjsxなどのプロジェクトを使用することである程度の成功を収めました。
ここに展開されたサイトを見ることができます! 追伸:進行中の作業です。

私はちょうど同じ状況にいることに気づき、@ 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のスタイルの問題で立ち往生しています。

@レイロナルドPRして頂けますか?

これに苦しんでいる人は、リポジトリから直接パッケージを追加して私のフォークを試してみたいと思うかもしれません

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

また

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

base.lessを除外し、他の変更を加えずにビルドしただけです。 私の場合は機能しますが、多くのコンポーネントを使用していません。 プロジェクトに適切なリセットスタイルシートがまだない場合は特に、一部のコンポーネントの外観が崩れる可能性があります。 #4546

ねえ@ afc163また、ここに飛び乗って、この問題を修正するための音声を追加したいと思います。 多くのターゲットを使用して大規模なアプリケーションを構築し、いくつかのターゲットはサードパーティのサイトに読み込まれます。 antdがグローバルCSSに干渉することは、これらのサードパーティサイトの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記事、

ルートはさておき、

ルートダイアログ、

ルートfigcaption、

ルートフィギュア、

ルートフッター、

ルートヘッダー、

ルートhgroup、

ルートメイン、

ルートナビゲーション、

ルートセクション{

表示ブロック;
}
`
等...

これが誰かに役立つことを願っています。

皆さん、それは本当に迷惑です。 このスタイリング動作は、ワールドクラスのUIライブラリに期待するものではありません。

少なくともドキュメントでグローバルリセットについて言及しているので、人々は混乱しません。 または、個々のスタイルとアイコンのインポートに関するレシピを含む「レガシーWebサイトへの統合」ガイドが役立つでしょう。

メンテナは、それ以来議論に参加していないため、この号が閉じられた後、退会したと思います。したがって、新しい号を開くか、直接pingするか、PRを開かない限り、この問題に関する公式のサポートは受けられないでしょう。

私はついに、元のantd.cssに基づいて、すべてのルールの前にカスタムクラスを付けた新しいCSSファイルを作成することで、この問題を回避する方法を見つけました。 私のソリューションでは、PostCSS、Gulp、およびpostcss-prefixwrapプラグインを使用しています。

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

完璧にはほど遠いですが、驚くほどうまく機能します。 少なくとも私のニーズのために;-)

要点には、接頭辞.antd-ns ( "名前空間"の省略形として "ns")が付いたantd CSSの既製バージョンも含まれています。

ノート:
私にとって重要な要件は、自動化されていることでした。そのため、新しいantのリリースごとにプレフィックス付きのCSSを簡単に作成できます。

  • これは、プレフィックス付きのCSSを作成するためのツールとしてのみ意図されています。 そのため、プロジェクトとは別のフォルダから実行できます。 antdベースのプロジェクトにPostCSSやGulpを含める必要はありません。 結果のCSSは、プロジェクトの静的CSSフォルダーに配置する必要があります(適切に構成されている場合は、Gulpによって実行されます)。
  • postcss-prefixwrapは少なくともバージョン1.3.0である必要があります。これには、 antdキーフレームアニメーションを保持するためのパッチが含まれています。

コメント/フィードバックは常に感謝しています!

彼のすばらしいPostCSSpostcss-prefixwrapプラグインでこれを可能にしてくれた@dbtedmanに感謝します。

コメント/フィードバックをいただければ幸いです。

私はついに、元のantd.cssに基づいて、すべてのルールの前にカスタムクラスを付けた新しいCSSファイルを作成することで、この問題を回避する方法を見つけました。

これは私見で最も簡単な解決策です。
個人的には、現在これは必要ありませんが、誰かがPRを送信して、より少ないファイルの各cssルールの前にクラス名の少ない変数(たとえば.@{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,
      }
    ]
  ]

https://ant.design/docs/react/getting-started#Import-on-Demandおよびhttps://github.com/ant-design/babel-plugin-importで説明されているようにJSビルドサイズを最適化するため

カスタマイズされたスタイリングのために、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」ファイルの処理を無視しようとしましたが、機能させることができませんでした。 理由はわかりません。 私の仮説は、Webpackで直接処理されるのではなく、LESSで処理されるためです。

その価値のために、私はantd.cssを手動で編集し、使用しているantdコンポーネントを壊すことなく不要なスタイルを削除することができました。

@paneq私は現在同じことをしています。 babel-plugin-importのスタイルオプションも関数である可能性があり、スタイルを含めるかどうかを決定できることに注意してください。 うまくいきませんでした。 それをデバッグする必要があります…
多分私もそのオプションを誤解していますか?

@paneqあなたが行ったことをコピーしましたが、これまでのところ機能しているようですが、どのコンポーネントがそのグローバルcssを必要とするかを確認するのに十分なコンポーネントを試していません。 ありがとう

@vthinkxie

こんにちは。.antで始まるすべての要素を一致させて、スタイルを割り当てることができるはずです。

* [class ^ = 'ant-'] {
ボックスサイズ:border-box;
-webkit-tap-highlight-color:rgba(0、0、0、0); //モバイルサファリのタップハイライトカラーを削除します
}

クロスブラウザ互換性があり、実装に時間がかからないはずです。

したがって、(少なくともこれまでのところ)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を使用していましたか? 私が尋ねている理由は、 antd @ 3.7.3と[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_スタイルには明らかに欠点があります。 しかし、それはうまく機能し、約2か月間、問題は発生していません。

@jaleikas
これに関する回避策を見つけましたか? 私の知る限り、 less-loader @ 4.xの問題はまだ解決されていないため、NormalModuleReplacementPluginで提案された修正は機能しません。 手動でオーバーライドしてスコープを設定できるため、このソリューションは実際には最良のソリューションのように見えます。
私はあなたと同じことを試し、less-loaderをダウングレードしましたが、webpackresolveが機能しません。

ここで[email protected]を使用します。

これに苦しんでいる人は、リポジトリから直接パッケージを追加して私のフォークを試してみたいと思うかもしれません

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

また

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

ベースを破棄して、他の変更を加えずにビルドしました。 私の場合は機能しますが、コンポーネントの多くは使用していません。 プロジェクトに適切なリセットスタイルシートがまだない場合は特に、一部のコンポーネントの影響を受ける可能性があります。 #4546

これは私のために働く

これに苦しんでいる人は、リポジトリから直接パッケージを追加して私のフォークを試してみたいと思うかもしれません

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

また

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

base.lessを除外し、他の変更を加えずにビルドしただけです。 私の場合は機能しますが、多くのコンポーネントを使用していません。 プロジェクトに適切なリセットスタイルシートがまだない場合は特に、一部のコンポーネントの外観が崩れる可能性があります。 #4546

この解決策をありがとう!

これに関する回避策を見つけましたか? 私の知る限り、 less-loader @ 4.xの問題はまだ解決されていないため、NormalModuleReplacementPluginで提案された修正は機能しません。 手動でオーバーライドしてスコープを設定できるため、このソリューションは実際には最良のソリューションのように見えます。

私はantdの使用をやめることにし、スタイルのないコンポーネント(rc-switchなど)を選ぶことにしました。 問題は、ほとんどの「スタイルが設定されていない」コンポーネントがひどく/文書化されておらず、一部のコンポーネントも異なる動作をしているように見えることです。そのため、ほとんどの場合、私はあきらめて他の場所を調べました...

こんにちは。.antで始まるすべての要素を一致させて、スタイルを割り当てることができるはずです。

* [class ^ = 'ant-'] {
ボックスサイズ:border-box;
-webkit-tap-highlight-color:rgba(0、0、0、0); //モバイルサファリのタップハイライトカラーを削除します
}

クロスブラウザ互換性があり、実装に時間がかからないはずです。

@ tylik1 、ありがとう! 私のelectronアプリの残りの部分と一致するようにフォントファミリを修正する必要がありました。 これは完全に私を救った。

これが誰かに役立つかどうかはわかりませんが、使用中のコンポーネントのみの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は実装しません。

現在、当社のReactコンポーネントライブラリを探していますが、これもブロッキングの問題であり、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年でした、人類は死にました、コロナウイルス、ant-designはプロジェクトにグローバルなスタイルを追加します...

#9363での追跡

このページは役に立ちましたか?
0 / 5 - 0 評価