reactjs 如何使用styled from @mui/material在nextjs应用程序中使用情感组件选择器?

qyswt5oh  于 2023-04-29  发布在  React
关注(0)|答案(2)|浏览(90)

这里有一个代码框:https://codesandbox.io/s/agitated-boyd-9z2r9?file=/pages/index.tsx
我遇到了一个组件选择器的问题,比如,如果我使用styled from @mui/material,我会得到这个错误Error: Component selectors can only be used in conjunction with @emotion/babel-plugin。但是如果我使用来自@emotion/styled的风格,它工作得很好。
还有一个相关的问题已经关闭:https://github.com/mui-org/material-ui/issues/27380没有线索如何重新打开它。

jhkqcmku

jhkqcmku1#

您需要安装@emotion/babel-plugin并将其配置为使用来自@mui/material的导入。Seewww.example. www.example.com

dfddblmv

dfddblmv2#

该解决方案现已在www.example上进行了文档说明 www.example.com 错误所述,您需要使用@emotion/babel-plugin和提供的链接中提供的配置。然后,您将能够使用组件作为选择器。下面是一个例子:

import { styled } from "@mui/system";
// or
import { styled } from "@mui/material/styles";

const Child = () => <div/>;

const Parent = styled("div")({
  [`&:hover ${Child}`]: {
    background: 'black',
  },
});

相关问题