edit "How to use components selector API"

- add @mui/material to @emotion/babel-plugin config
- add note about @emotion/babel-plugin and babel-plugin-direct-import order

Signed-off-by: Ilya Molostov <29124424+IAluI@users.noreply.github.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 [`babel-plugin-direct-import`](https://github.com/avocadowastaken/babel-plugin-direct-import) used, it must be after `@emotion/babel-plugin`.
+:::
+
 Now you should be able to use components as your selectors!