style: apply ESLint rules to enforce correct import path

Author: pionxzh

.eslintrc.js

@@ -88,6 +88,16 @@ module.exports = {
     '@typescript-eslint/no-restricted-imports': [
       'error',
       {
+        paths: [
+          {
+            name: '@mui/material',
+            importNames: ['styled', 'createTheme', 'ThemeProvider'],
+            message: `
+Use "import { styled } from '@mui/material/styles'" instead.
+Use "import { createTheme } from '@mui/material/styles'" instead.
+Use "import { ThemeProvider } from '@mui/system'" instead.`
+          }
+        ],
         patterns: [
           {
             group: ['**/dist'],

src/components/DataKeyPair.tsx

@@ -1,4 +1,5 @@
-import { Box, styled } from '@mui/material'
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
 import React, { useCallback, useMemo, useState } from 'react'
 
 import { useTextColor } from '../hooks/useColor'

src/components/mui/DataBox.tsx

@@ -1,4 +1,5 @@
-import { Box, styled } from '@mui/material'
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
 
 export const DataBox = styled(props => <Box component='div' {...props}/>)`
   display: inline-block;

src/index.tsx

@@ -1,7 +1,5 @@
-import {
-  createTheme, Paper,
-  ThemeProvider
-} from '@mui/material'
+import { Paper } from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { DataKeyPair } from './components/DataKeyPair'