44

box-shadowほとんどの MUI コンポーネントのデフォルトを無効にする必要があります。現在、次のように、各コンポーネントのスタイルを手動で設定することでこれを行っています。

<FloatingActionButton style={{boxShadow: "none"}} />

おそらくテーマ設定を使用して、これをグローバルに行う方法はありますか?

4

7 に答える 7

87

次のようにコンポーネントごとに実行できます。

<AppBar elevation={0} />
于 2019-08-06T20:41:24.893 に答える
30

material-ui テーマの構成オブジェクトでは、shadowsプロパティを確認してコードでオーバーライドし、none値だけを残し、残りをすべて削除できます。

コードは次のようになります。

const theme = createMuiTheme({
  shadows: ["none"]
});

すべてのシャドー ボックスは、アプリケーションで完全に削除されます。

P/s: この構成はバージョン用です1.0.0-beta.8。このバージョンには破壊的な変更がいくつかあるため、ここで注意する必要があります。

于 2017-09-09T04:50:43.127 に答える
3

zDepthShadowsカスタム テーマを作成するか、テーマをインポートするときにオーバーライドして、テーマで を「none」に設定するだけです。

于 2016-05-31T20:09:27.187 に答える
1

<FloatingActionButton style={{boxShadow: "none"}} elevation={0} /> Worked for meを使用します。実際にMenuに適用してみたのが下図。

<Menu
    id="indMenu"
    onClose={handleIndustryMenuClose}
    anchorEl={anchorEL}
    open={Boolean(anchorEL)}
    className={classes.ndmenu}
    elevation={0}
    style={{
      marginTop: "3.5em",
      // boxShadow:"none"
    }}
  >
于 2021-07-02T11:39:35.147 に答える