Browse Source

Investigate and explain why component selectors don't work with Next vanilla

Refs:
- https://github.com/mui/material-ui/issues/27380#issuecomment-928973157
- https://codesandbox.io/s/hopeful-browser-4q17t5?file=/README.md
- https://mui.com/system/styled/#how-to-use-components-selector-api
- https://github.com/vercel/next.js/issues/46973
Manav Rathi 1 năm trước cách đây
mục cha
commit
eced463f6f
1 tập tin đã thay đổi với 15 bổ sung0 xóa
  1. 15 0
      web/docs/dependencies.md

+ 15 - 0
web/docs/dependencies.md

@@ -75,6 +75,21 @@ Emotion itself comes in many parts, of which we need the following:
   > Keep `@emotion/styled` as a dependency of your project. Even if you never
   > use it explicitly, it's a peer dependency of `@mui/material`.
 
+Note that currently the SWC plugin doesn't allow the use of the component
+selectors API (i.e using `styled.div` instead of `styled("div")`).
+
+> I think the transform for component selectors is not implemented in the swc
+> plugin.
+>
+> https://github.com/vercel/next.js/issues/46973
+
+There is a way of enabling it by installing the `@emotion/babel-plugin` and
+specifying the import map as mentioned
+[here](https://mui.com/system/styled/#how-to-use-components-selector-api) ([full
+example](https://github.com/mui/material-ui/issues/27380#issuecomment-928973157)),
+but that disables the SWC integration altogether, so we live with this
+infelicity for now.
+
 ### Translations
 
 For showing the app's UI in multiple languages, we use the i18next library,