Material UIでカスタムスタイルが適用されない問題
2810 ワード
Material UIでCSS Modulesを使ったカスタムスタイルを使用していたところ、スタイルが一部適用されない不具合が発生しました。
正確には、カスタムスタイルを何かが上書きしている状態です。
詳しく調べてみたところ、カスタムスタイルはMaterial UIのデフォルトのスタイルによって上書きされていたことが発覚しました。
Material UIではCSSのinject順序によって、カスタムスタイルよりもMaterial UIのスタイルが優先される場合があるようで、カスタムスタイルを常に優先させる場合、injectの順序を明示する必要があるようです。
このように、StyledEngineProviderでラップし、injectFirstをつけることで、カスタムスタイルを優先させることができます。
import * as React from 'react';
import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
<StyledEngineProvider injectFirst>
{/* Your component tree. Now you can override MUI's styles. */}
</StyledEngineProvider>
);
}
Author And Source
この問題について(Material UIでカスタムスタイルが適用されない問題), 我々は、より多くの情報をここで見つけました https://zenn.dev/metallic_kfc/articles/96791d888dddc1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol