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 <[email protected]>
IAluI · Sep 9, 2024 · 2645f39 · 2645f39
1 parent 64aaf56
commit 2645f39
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/docs/data/system/styled/styled.md b/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!