[docs][material-ui][system] Edit "How to use components selector API"…

… section to add about direct import (#43377)

Signed-off-by: Ilya Molostov <29124424+IAluI@users.noreply.github.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>

docs/data/system/styled/styled.md

@@ -280,6 +280,12 @@ module.exports = {
               styledBaseImport: ["@mui/system", "styled"]
             }
           },
+          "@mui/material": {
+            styled: {
+              canonicalImport: ["@emotion/styled", "default"],
+              styledBaseImport: ["@mui/material", "styled"]
+            }
+          },
           "@mui/material/styles": {
             styled: {
               canonicalImport: ["@emotion/styled", "default"],
@@ -294,4 +300,8 @@ module.exports = {
 
 ```
 
+:::info
+Note: If you use [`babel-plugin-direct-import`](https://github.com/avocadowastaken/babel-plugin-direct-import), place it after `@emotion/babel-plugin` in the Babel config.
+:::
+
 Now you should be able to use components as your selectors!