Material UIでカスタムスタイルが適用されない問題

Material UIでCSS Modulesを使ったカスタムスタイルを使用していたところ、スタイルが一部適用されない不具合が発生しました。
正確には、カスタムスタイルを何かが上書きしている状態です。
詳しく調べてみたところ、カスタムスタイルはMaterial UIのデフォルトのスタイルによって上書きされていたことが発覚しました。

Material UIではCSSのinject順序によって、カスタムスタイルよりもMaterial UIのスタイルが優先される場合があるようで、カスタムスタイルを常に優先させる場合、injectの順序を明示する必要があるようです。

https://mui.com/material-ui/guides/interoperability/#css-injection-order

このように、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>
  );
}