Ant-design: グローバルスタイルを削除する

https://github.com/react-componentから直接コンポーネントを使用することもでき
antdはそれらの上に構築されており、スタイルは設定されていません。

これに対処してください。 これは、私たちのアプリにとってハードブロッカーです。

こんにちは、感情やスタイル付きコンポーネントのようなCSS-in-JSライブラリの使用について考えてみませんか。 スタイルのグローバルインポートや、antコンポーネントへのスタイルのスコープ設定などの多くの問題を解決できます。 さらに、テーマ（動的スタイル）を改善することもできます。 申し訳ありませんが、これが他の場所で議論されている場合、関連する議論を見つけることができませんでした。

@ divyanshu013 antdは、components / javascriptだけでなく、antdスタイルの仕様を含めることを目的としているため、これは彼らにとって最優先事項ではないと思います。 さらに、これは技術的には社内プロジェクトのモノレポであることを意味するため、他の人のブランドのテーマは自動的に最優先事項ではありません。 そうは言っても、私はあなたと一緒です。グローバルスタイルよりもスタイル付きコンポーネントを使用したいと思います。

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

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

わかりました。antdのファイル構造がそれほど深く見られていないことを認めなければならないので、誰かがこれに光を当てることができるかもしれません。

コンポーネントの少ないファイルだけを含めることは、どれほど大きな不快感ですか？ たとえば、次のようなことをします

import {Select} from'antd ';
import'antd / lib / select / style / index.less ';

簡単なテストに基づいて、それはうまくいく
これはアップデートで壊れると確信していますが、他のソリューションも同様にリスクを冒しているようです。

これは、個々のコンポーネントのスタイルをインポートできることに関連しています。 コンポーネントのスタイルが自己完結型である場合、人々はグローバルリセット/スタイルをオプトインまたはオプトアウトできます。

現在の状況：

• グローバルなリセットとスタイルを削除することは、重大な変更になるため、実行可能ではありません。
• 個々のコンポーネントのスタイルのインポートは、依存関係が隠されていることがあり、グローバルスタイルに依存しているため、現在は機能しません。

コンポーネントを壊さない方法で自己完結させるにはどうすればよいでしょうか。 1つの解決策は、 Storybookを使用していくつかの分離された視覚的回帰テストを設定することであると思います。

グローバルスタイルを含むスナップショットを生成してから、グローバルスタイルを削除し、テストに合格するまでコンポーネントレスファイルにスタイルを追加して、スタイルがグローバルスタイルの有無にかかわらず同じであることを確認できます。

ref＃4331＃13459

_半重複の問題を作成してしまったことをお詫びします。 会話を統合するために、ここで少し異なる質問をします。_

コミュニティがコンポーネントスタイルをグローバルスタイルに依存しなくなるように移行する作業を行うことができたらどうでしょうか？

1つのアプローチ（@DylanVannに感謝）：

1. すべてのコンポーネントの自動視覚回帰テストを追加します
2. コンポーネントスタイルをリファクタリングして、以前はグローバルだったスタイルを非グローバルな方法で使用する
   
   
   
   • 私は[class="ant-"] { ... }アプローチが好きですが、おそらくここにはたくさんのオプションがあります
   
   
3. コンポーネントに重大な変更がないことを確認します
4. それに依存している人のために、オプトインインポートとして、グローバルスタイルで今日のbase.lessを提供します

Antは次のことにオープンです：

1. その作業のPRを確認し、受け入れる可能性がありますか？
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のファイル構造がそれほど深く見られていないことを認めなければならないので、誰かがこれに光を当てることができるかもしれません。

コンポーネントの少ないファイルだけを含めることは、どれほど大きな不快感ですか？ たとえば、次のようなことをします

import {Select} from'antd ';
import'antd / lib / select / style / index.less ';

簡単なテストに基づくと、動作しているように見えるので、興味をそそられました...
これはアップデートで壊れると確信していますが、他のソリューションも同様にリスクを冒しているようです。

これは命の恩人です！
私はimport'antd / dist /antd.css 'を使用していました
Googleで検索し、この問題を見つけました。
スイッチコンポーネントのスタイルのみが必要だったので、インポートしてみました '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コンポーネントまたは単一のdistcssファイルのスタイルをインポートしますか。

@ himanshuc3オンデマンドコンポーネントのインポートにbabel-plugin-importを使用しています

@fedebabrauskasコンポーネントのアニメーションが有効になっていないようです（Popoverを試しましたが、スタイルは問題ありませんが、アニメーションはありません）

同じケースですが、折りたたみを使用します

babel-plugin-importはグローバルスタイルをインポートし、
次のような特定のコンポーネントのcssファイルをインポートします。
import 'antd/lib/date-picker/style/index.css';
Datepickerを壊します（奇妙で予期しない方法で開閉します）。

それに関する回避策はありますか？

他の多くのコンポーネントに依存する転送コンポーネントを使用しています...暗いタイポグラフィヘッダーがすべて原色などに準拠していないことに気づきました。

+1

+1

これは、他のコンポーネントライブラリとともにAntDesignを使用するデモアプリで使用した回避策です。

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を使用していますが、これにパッチを適用するためだけに追加したくありません。 Selectコンポーネントを実行するために最小限のcssファイルのみをロードできるようにしたい

この問題が私のGithubホームページの上に表示されるのを見るのはほぼ3年です。

私は長い間アリの使用をやめました。 これを閉じて、コミュニティやメンテナに他の場所でフォローさせることはできますか？

Remove global Stylesについては、誰もがこれに焦点を当てています。これについて詳しく知りたくない場合は、この問題だけをunsubscribeてください。ありがとうございます。

私はそれが最善の考えではないと思います。 私たちの多くはまだantdを使用しており、この問題の解決を望んでいます。
主要な問題がすべての歴史になるのは良いことです。