与 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}>&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 (将#修改为@）