如何在动态导入中使用样式化的组件

Question

我正在尝试找到一种方法来动态导入继承某些标准样式的svg图标。我没有看到其他人在写有关此事的文章...所以我认为我走错了轨道。

我尝试在样式化的组件中创建SVG包装器，但这给了我svg> svg> path的嵌套 我不确定这是否是正确的主意。 以后出现特殊性问题时，我想避免使用内联样式。

SVG图标代码<-使用Create React App，我将svg导出为默认的React组件

export { ReactComponent as default } from './logo.svg';

我的图标代码<-styled.svg是我想与DynamicIcon合并的东西...有没有办法像DynamicStyle那样做TestStyle吗？ <-在文档中，as用于更改标签类型，所以我认为这不对吗？

const TestStyle = styled.svg`
  height: 1rem;
  width: 1rem;
  display: inline-block;
`
const Icon: React.FC<IconProps> = ({ name }: IconProps): React.ReactElement => {
  const DynamicIcon = lazy((): Promise<any> => import(`../../assets/icons/${name}.tsx`));
  return (
    <Suspense fallback={<div>Loading ...</div>}>
      <DynamicIcon />
    </Suspense>
  );
};

导入工作并正在显示，但是我希望将该组件作为样式化的组件，这将使我能够使用主题并通过道具动态更改SVG样式。

Answer 1

ℹ-我的TypeScript foo很弱，因此将在下面使用香草JS

您可以简单地用styled(DynamicIcon)包装动态加载的组件。 参考：Extending Styles文档

// Instead of ?
// const TestStyle = styled.svg`
//   height: ${props => props.size};
//   width: ${props => props.size};
//   display: inline-block;
// `;

const Icon = ({ name, iconSize }) => {
  const DynamicIcon = lazy(() => import(`./icons/${name}.jsx`));
  // ... ? Wrap the dynamically loaded component in `styled()`.
  const StyledIcon = styled(DynamicIcon)`
    height: ${props => props.size}px;
    width: ${props => props.size}px;
    display: inline-block;
  `;

  return (
    <Suspense fallback={<div>Loading ...</div>}>
      <StyledIcon size={iconSize} />
    </Suspense>
  );
};

⚠ 但是请注意，上面使用prop.size的用法不是一个好主意，因为它会为每个宽度/高度创建多个类。
（我试图通过.attrs来解决它，但是无法正常工作，但是我发现它不在本问题的讨论范围之内，而是交给您leave ）

在此处查看分叉的演示。

这是徽标包裹在样式化组件中的外观