reactjs - 如何更改影子根关闭以打开，React

Question

我正在开发一个 React 应用程序。我想使用从 illustrator 导入的 SVG 文件。为此，我使用SVGR，它允许我从 illustrator 代码生成 React 组件。

我得到这个组件：

import React from 'react';

const SvgComponent = props => {
    return (
        <div className="SvgComponent">
            <svg viewBox="0 0 640 480" {...props}>
                <defs>
                    <div>
                    <path
                        id="prefix__a"
                        d="M266.5 87.5c163.9-9.4 296.9 60.1 331 163 22.3 67.2 7.4 164-42 189-50.7 25.7-97.3-44.7-207-30-50.8 6.8-65.7 25.2-103 15-44.6-12.2-90.7-56.9-91-103-.3-51.1 55.8-63.7 55-122-.5-38-24.7-55.3-14-79 10.3-22.7 43.2-30.3 71-33z"
                    />
                    </div>

                </defs>
                <clipPath id="prefix__b">
                    <use xlinkHref="#prefix__a" overflow="visible" />
                </clipPath>
            </svg>
        </div>
    )};

export default SvgComponent

问题是什么都没有显示，我看到有Shadow Root关闭了。我不熟悉影子根。我怎样才能打开它？

我曾尝试使用react-shadow-root但它不起作用。

标签： reactjssvg