如何解决与 ShadowDom 反应:将 css 文件导入 <style>
我有一个使用 shadow DOM 隔离的组件。
import React,{ FunctionComponent,ReactNode,useEffect,useRef,useState } from 'react';
import { createPortal } from 'react-dom';
import styles from './Neon.module.css';
const Neon: FunctionComponent = () => (
<ShadowWrapper mode="open">
<div className={styles.tiles}>
<div className={styles.sign}>
<div className={styles.compassion}>
<span className={styles['fast-flicker']}>Com</span>
<span>passion</span>
</div>
<span className={styles.amp}>&</span>
<div className={styles.emotion}>
<span className={styles.flicker}>e</span>
<span>motion</span>
</div>
</div>
</div>
</ShadowWrapper>
);
export default Neon;
const ShadowWrapper: React.FC<{ mode: ShadowRootMode,children: ReactNode }> = (props) => {
const { children,mode = "open",...rest } = props;
const ref = useRef<Element | null>(null);
const [shadowRoot,setShadowRoot] = useState<ShadowRoot | null>(null);
useEffect(() => {
setShadowRoot(ref.current!.attachShadow({ mode }));
},[]);
return (
<div {...rest} ref={ref}>
{shadowRoot && createPortal(children,shadowRoot)}
</div>
);
};
由于它是隔离的,所以从css模块导入的样式将不起作用。
所以我想将样式导入到 <style>
元素中。
但是我怎么能做到这一点?<style>{styles}</style>
抛出(如预期)以下错误:Objects is not valid as a React child
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。