更新:我从来没有在React自定义元素中应用样式组件。我最终做的是升级到mui v5(包括使用情感)，在那里我能够使用@mui/material/styles的style和@mui/styles的makeStyles就好了。在React自定义元素
中为MUI材质v5创建插入点以在阴影dom中安装样式原始:我有一个React应用程序，其中的样式组件应用得很好，一切都运行得很好。我现在已经将这个应用程序转换为一个自定义元素，现在样式组件没有被应用。如有任何帮助，不胜感激。
Item.styles。TSX <——保存样式化的组件
export const ItemBody = styled.section`
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 1.25rem;
`;
export const ItemDetailContainer = styled.div`
margin: 0.25rem;
min-height: 5rem;
`;
// and so on
MyItem.tsx
import {
ItemBody,
ItemDetailContainer,
ItemButton,
} from './../styles/Item.styles';
const useStyles = makeStyles((theme) => ({
descriptionWrapper: {
fontSize: '1.5rem',
fontWeight: 900,
}
// and so on. NOTE: These styles ARE still getting applied but not the imported ones
}));
type Props = {
itemId: string;
itemName: string;
itemDescription?: string[];
};
const MyItem: React.FC<Props> = ({
itemId,
itemName,
itemDescription,
}) => {
const classes = useStyles();
return (
<div key={tileIndex}>
<ItemBody> //style NOT applied
<ItemDetailContainer> //style NOT applied
<span className={classes.descriptionWrapper}> //style IS applied
{itemDescription}
</span>
</ItemDetailContainer>
</ItemBody>
//and so on
);
};
export default MyItem;
App.tsx
import React from 'react';
import MyItem from './components/MyItem';
import './App.styles.css';
class App extends React.Component {
render() {
return (
<div className='App'>
<MyItem />
</div>
);
}
}
export default App;
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { render } from 'react-dom';
import {
StylesProvider,
jssPreset,
} from '@material-ui/core/styles';
import { create } from 'jss';
class MyWebComponent extends HTMLElement {
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: 'open' });
const mountPoint = document.createElement('custom-jss-insertion-point');
const reactRoot = shadowRoot.appendChild(mountPoint);
const jss = create({
...jssPreset(),
insertionPoint: reactRoot,
});
render(
<StylesProvider jss={jss}>
<App />
</StylesProvider>,
mountPoint
);
}
}
customElements.define('my-element', MyWebComponent);
index . html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React Custom Element</title>
</head>
<body>
<my-element id="elem"></my-element>
<div id="root"></div>
</body>
</html>
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const Dotenv = require('dotenv-webpack');
module.exports = {
mode: 'development',
entry: {
app: path.join(__dirname, 'src', 'index.tsx'),
},
devtool: 'source-map',
devServer: {
port: 3000,
historyApiFallback: {
index: '/index.html',
},
},
module: {
rules: [
{
test: /.css$/,
use: [
{ loader: 'react-web-component-style-loader' },
{ loader: 'css-loader' },
],
},
{ test: /.tsx?$/, use: 'ts-loader', exclude: /node_modules/ },
{ test: /.js$/, use: 'babel-loader' },
],
},
resolve: {
extensions: ['.ts', '.tsx', '.js'],
fallback: { constants: require.resolve('constants-browserify') },
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
favicon: './public/favicon.ico',
filename: 'index.html',
manifest: './public/manifest.json',
logo192: './logo192.png',
}),
new Dotenv(),
],
};
我没有评论的代表，我没有tsx编码器，但可能是MyItem中的导入。TSX在"中丢失了">
import {
ItemBody
ItemDetailContainer
ItemButton
}'./../styles/Item.styles';
应该
import {
ItemBody,
ItemDetailContainer,
ItemButton
} from './../styles/Item.styles';
不要忘记用逗号分隔导入文件!