diff --git a/.changeset/chatty-rules-repair.md b/.changeset/chatty-rules-repair.md
new file mode 100644
index 0000000000..0442826484
--- /dev/null
+++ b/.changeset/chatty-rules-repair.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs-react': patch
+---
+
+Added ESLint rule `no-top-level-material-ui-4-imports` in the Techdocs-react plugin to migrate the Material UI imports.
diff --git a/plugins/techdocs-react/.eslintrc.js b/plugins/techdocs-react/.eslintrc.js
index e2a53a6ad2..e487f765b2 100644
--- a/plugins/techdocs-react/.eslintrc.js
+++ b/plugins/techdocs-react/.eslintrc.js
@@ -1 +1,5 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname, {
+  rules: {
+    '@backstage/no-top-level-material-ui-4-imports': 'error',
+  },
+});
diff --git a/plugins/techdocs-react/src/component.tsx b/plugins/techdocs-react/src/component.tsx
index 48d3138321..0388aafed8 100644
--- a/plugins/techdocs-react/src/component.tsx
+++ b/plugins/techdocs-react/src/component.tsx
@@ -22,7 +22,8 @@ import React, {
 } from 'react';
 
 import { create } from 'jss';
-import { StylesProvider, jssPreset } from '@material-ui/styles';
+import StylesProvider from '@material-ui/styles/StylesProvider';
+import jssPreset from '@material-ui/styles/jssPreset';
 
 import { Progress } from '@backstage/core-components';
 
diff --git a/plugins/techdocs-react/src/context.test.tsx b/plugins/techdocs-react/src/context.test.tsx
index bcab445729..a923b3c528 100644
--- a/plugins/techdocs-react/src/context.test.tsx
+++ b/plugins/techdocs-react/src/context.test.tsx
@@ -16,7 +16,7 @@
 import React from 'react';
 import { renderHook, act, waitFor } from '@testing-library/react';
 
-import { ThemeProvider } from '@material-ui/core';
+import { ThemeProvider } from '@material-ui/core/styles';
 
 import { lightTheme } from '@backstage/theme';
 import {