时间戳

首页 > 解决方案 > 在 createGlobalStyles 中导入引导 css？

reactjs - 在 createGlobalStyles 中导入引导 css？

问题描述

我正在构建一个带有样式组件的反应组件库。我有一个<GlobalStyles />用于使用该库的项目的组件。在我要从中迁移的 SASS 中，我有一个根index.scss文件，我在其中执行以下操作：

@import '~bootstrap/scss/bootstrap';

我想我不能把它放在我的全局样式中：

import { createGlobalStyle } from "styled-components"
const GlobalStyles = createGlobalStyle`
  @import '~bootstrap/scss/bootstrap';
`

我如何确保包括在内的任何项目<GlobalStyles />也将收到引导样式表？

标签： reactjsstyled-components

解决方案

由于显而易见的原因，您不能在不处理它的情况下导入引导程序 scss 样式表。

但是您可以导入引导样式表。不幸的是createGlobalStyle，没有处理这些导入，因为底层的 CSSDOM 导入不能很好地处理这些。最简单的实现是将引导 CSS 文件导入到您的库中，例如：

import 'bootstrap/dist/css/bootstrap.min.css';

但请注意，这将生成一个额外的 CSS 文件，您的库的用户也必须包含与此类似的内容。

如果您想动态创建它，您可以尝试从 CDN 添加它。

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const head = document.head;
    const link = document.createElement('link');
    link.href = `https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css`;
    link.rel = `stylesheet`;
    head.append(link);
  }, []);
}

但考虑到这些必须包含在所有组件中的事实，但不应多次包含。您可以做到这一点的一种方法是在link标签中添加一个 ID 并在添加新的之前查询 DOM。

推荐阅读