reactjs 如何从本地css文件中提取css内容并将其注入到tag中< style>？

svdrlsy4 于 2023-02-15 发布在 React

关注(0)|答案(3)|浏览(104)

我知道我可以像这样使用style.innerHTML在<style>标记中创建自己的样式内容

let style = document.createElement("style");
    style.setAttribute("id", "raptors");
    style.innerHTML =
      ".puma {" +
      "color: purple;" +
      "font-size: 50px;" +
      "text-align: left;" +
      "}";

但是，我不想手动将css写入style.innerHTML，而是想通过从本地文件（如./styles.css）导入样式来设置样式内容。

styles.innerHTML = import `./styles.css`

所以我想出了这个fetch解决方案，但是运气不好。有没有这个的解决方案？https://codesandbox.io/s/stylesheet-fetch-experiment-ek4d1h?file=/src/App.js:267-646

let style = document.createElement("style");
    style.setAttribute("id", "test");
    async function loadCss() {
      try {
        const response = await fetch("./style.css");
        const css = await response.text();
        style.textContent = css;
      } catch (error) {
        console.error(error);
      }
    }
    loadCss();

reactjs

来源：https://stackoverflow.com/questions/75452822/how-to-extract-the-css-content-from-local-css-file-and-inject-them-into-style

3条答案

按热度按时间

3lxsmp7m1#

您可以创建一个link并设置其href，而不是创建一个style元素：

let link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", "./styles.css");
document.head.appendChild(link);

赞(0）回复(0）举报 2023-02-15

xdnvmnnf2#

在组件中导入样式表，使用类名，就这样.
在Component.tsx或Component.js中：

import "./Component.styles.css";

const Component = () => {
  return (
    <div className="myDiv">
      something
    </div>
  );
}

在Component.styles.css中：

.myDiv {
 color: red;
}

赞(0）回复(0）举报 2023-02-15

sg3maiej3#

除了火狐：

import stylesheet from "./style.css" assert { type: "css" };
document.adoptedStyleSheets = [stylesheet];

在firefox中：使用CSSStyleSheet创建新的样式列表

const response = await fetch("./style.css");
const styles = await response.text();
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync(styles);
document.adoptedStyleSheets = [stylesheet];

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs 如何从本地css文件中提取css内容并将其注入到tag中< style>？

3条答案

相关问题

热门标签

最新问答