web-dev-qa-db-ja.com

ant.designの「テーブル」コンポーネントのスタイルを変更するにはどうすればよいですか？

現在テーブルがあり、テーブルの列ヘッダーを別の色に変更したいと思います。

表へのリンク

私が試したこと：

  1. <Table className="ant-table-thead">
 ...
</Table>

  2. <Table className="ant-table-content">
...
</Table>

Cssファイルの中に：

.ant-table-content {
  background-color: rgb(127, 127, 127);
  color: rgb(127, 127, 127);
 }

この特定のTableコンポーネントのスタイル設定に役立つ情報があればいいのですが、ant.designで他のコンポーネントのスタイル設定を行う方法の一般的なガイドライン（または、考えられるすべてのclassNameを見つけることができる場所）を教えていただければ幸いです。

html-tableclassnameantd
3
HunterLiu

それで私は一般的な考えが正しいことを知りました。テーブルなどのhtmlコンポーネントごとに、classNameを定義するのが一般的な方法です。 Ant-Designを使用しているため、特定のclassNameが必要です。これらのclassNameは、クライアントのnode_modulesフォルダー、antd/es内、および使用中の特定のコンポーネントにあります。次に、index.cssファイルに、編集可能なすべてのclassNameと特定の属性が一覧表示されます。

1
HunterLiu

Default.less属性をオーバーライドして、antdスタイルを変更することもできます。しかし、そのためには、cssの代わりに使用する必要が少なくなります。ドキュメントには詳細があります。

  1. import 'antd/dist/antd.less'
  2. Webpackに必要なローダーの数を減らす必要があります。

  3. また、オーバーライドを持つ.jsファイルを指すテーマ参照をpackage.jsonに作成します。

    "theme": "./theme.js"

  4. オーバーライドをtheme.jsファイルに書き込みます。

module.exports = () => 
{
    return {
        'primary-color': '#1DA57A',
        'border-radius-base': '2px',
    }
}
0
nishant