如何将阴影根从关闭更改为打开，

Question

我正在开发一个React应用程序。我想使用从Illustrator导入的SVG文件。为此，我使用SVGR，它使我可以从插画器代码生成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

问题是什么也没显示，我发现暗影根已关闭。我对影子根不熟悉。 如何打开它？

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