我用 Preact 创建了这个 Web 组件，我正在尝试使用 Material ui 来设置它的样式。阅读 Preacts 文档，https://preactjs.com/about/libraries-addons/，它声称支持 Material ui。然而，当我在本地运行应用程序时，它会给出错误，因为材料 ui 依赖于反应。
我使用以下方式安装了 mui：
npm install @mui/material @emotion/react @emotion/styled然后我从 mui 文档中复制了一个示例来制作最基本的滑块：
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Slider from "@mui/material/Slider";
export default function ContinuousSlider() {
return (
<Box sx={{ width: 200 }}>
<Slider disabled defaultValue={30} aria-label="Disabled slider" />
</Box>
);
}
我在 Shadow-dom 中获取了滑块的 html，但它完全没有样式，所以如果不检查代码我就看不到它。
我也尝试过使用 preact-material-components 但结果是一样的，而且我有点不愿意使用它，因为它已经四年没有更新了。
该项目是用 Vite 设置的，我的
vite.config.jsimport { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
});
编辑：
我尝试对此处包含的文件进行非常简单的复制：
我有这个使用 Preact 构建的 Web 组件，我正在尝试向其中添加 Mui 样式。在我打开影子根之前它工作正常。
基本上我有以下文件。 'index.html':
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>Slider</title>
</head>
<body>
<script type="module" src="/index.jsx"></script>
<slider-component></slider-component>
</body>
</html>
index.jsximport register from "preact-custom-element";
import Slider from "./src/Slider";
register(Slider, "slider-component", [], { shadow: true });
和
Slider.jsximport Slider from "@mui/material/Slider";
export default function ContinuousSlider() {
return <Slider defaultValue={30} aria-label="Disabled slider" />;
}
然后我有
jsconfig.json{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "bundler",
"noEmit": true,
"allowJs": true,
"checkJs": true,
/* Preact Config */
"jsx": "react-jsx",
"jsxImportSource": "preact",
"skipLibCheck": true,
"paths": {
"react": ["./node_modules/preact/compat/"],
"react-dom": ["./node_modules/preact/compat/"]
}
},
"include": ["node_modules/vite/client.d.ts", "**/*"]
}
和
package.json{
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.15",
"preact": "^10.13.1",
"preact-custom-element": "^4.3.0",
"react": "npm:@preact/compat",
"react-dom": "npm:@preact/compat"
},
"devDependencies": {
"@preact/preset-vite": "^2.5.0",
"eslint": "^8.56.0",
"eslint-config-preact": "^1.3.0",
"vite": "^4.3.2"
},
"eslintConfig": {
"extends": "preact"
}
}
加上
vite.config.jsimport { defineConfig } from 'vite';
import preact from '@preact/preset-vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
});
当我在
{ shadow: false }中从
{ shadow: true }更改为
index.jsx 时，就会出现问题
我发现在使用 preact 创建 Web 组件时需要在注册函数的 props 中传递
adoptedStyleSheets: trueregister(Slider, "slider-component", [], { shadow: false, adoptedStyleSheets: true });