web-dev-qa-db-ja.com

Material-Table：スタイリングは、カスタムUIおよびマテリアルUIスタイリングをオーバーライドし、アイコンはレンダリングされません。

Material-Tableコンポーネントを使用しようとしています。これは、作成中のテーブル（行の追加、編集、削除、検索）に最適です。私はそれをページの子コンポーネントとしてインストールして使用しました-すべてが機能しますが...

スタイリング：すべてのマテリアルUIコンポーネントで、ページ内のすべてのカスタムおよび組み込みのスタイル設定が失われます（つまり、AppBarボタンの間にパディング/スペースがなく、カスタムフォントスタイルがめちゃくちゃになります）。

アイコン：テーブル内のアイコンはレンダリングされません-大きなカットオフテキストとして表示されます。

表のない他のページのスタイルやアイコンは影響を受けません。

誰かが解決策を持っていますか？前もって感謝します。

アイコンについては、ライブラリを再インストールしてインポートしてみました。 htmlメソッドも入れてみました。マテリアルテーブルコードのスニペットは次のとおりです。

<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={state.data}
  actions={[
    {
      icon: 'edit',
      tooltip: 'Edit Study',
      onClick: (event, rowData) => alert("Do you want to edit " + rowData.name + "?") 
    },
    rowData => ({
      icon: 'clear',
      tooltip: 'Delete User',
      onClick: (event, rowData) => alert("You want to delete " + rowData.name), 
      disabled: rowData.birthYear < 2000
    })
  ]}
  editable={{
    onRowAdd: newData =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data.Push(newData);
          setState({ ...state, data });
        }, 600);
      }),
    onRowDelete: oldData =>
      new Promise(resolve => {
        setTimeout(() => {
          resolve();
          const data = [...state.data];
          data.splice(data.indexOf(oldData), 1);
          setState({ ...state, data });
        }, 600);
      }),
  }}
/>
cssreactjsiconsmaterial-uimaterial-table
5
ckyc

私の状況では、@ material-ui/core @ 4.0.0-betaを使用しており、material-tableは4.2.1を使用しています。

材料表をインストールした後にログを取得できます

info Direct dependencies
├─ @material-ui/[email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @date-io/[email protected]
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ @material-ui/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

したがって、マテリアルUIをyarn add @material-ui/[email protected]によって@ material-ui/core @ 4.2.1にアップグレードします。そしてそれは機能します。

0
Renyuan wang