From 2645f39aa600cc2745b991a7db812077e614cf64 Mon Sep 17 00:00:00 2001
From: Ilya Molostov <29124424+IAluI@users.noreply.github.com>
Date: Tue, 20 Aug 2024 16:43:12 +0700
Subject: [PATCH] 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 | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/data/system/styled/styled.md b/docs/data/system/styled/styled.md
index cac8b41080267f..1828943bbe23ac 100644
--- 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!