我如何使用带有动态导入的样式组件

Question

我正在尝试找到一种方法来动态导入继承了一些标准样式的 svg 图标。我还没有看到其他人写过这个...所以我想我走错了路。

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

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

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

我的图标代码 <-- styled.svg 是我想与 DynamicIcon 合并的东西...有没有办法将 DynamicIcon 作为 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 很弱所以将在下面使用 vanilla 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 的用法不是一个好主意，因为它会为每个 width/height.
创建多个类（我试图用 .attrs 来绕过它，但无法让它工作，但我发现它超出了这个问题的范围并留给你 ）

在此处查看分叉演示。

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

我如何使用带有动态导入的样式组件

How do i use styled components with dynamic imports

reactjs

styled-components