在 React 文件中添加 CSS答案

【问题标题】：Adding CSS in React file在 React 文件中添加 CSS
【发布时间】：2020-08-29 09:52:33
【问题描述】：

如何添加变量中的特定 CSS 文件？

render {

 const {styleSheet} = this.prop;

 return (
    <div className={styleSheet}>
       <h4> Hi </h4>
    <div>
 )
}

假设我的样式表属性可以具有 red 、 green 和 blue 的值

red 字体颜色为红色，内容在左侧。
green 字体颜色为绿色，内容居中。
blue 字体颜色为蓝色，内容在右侧。

如何为每个值创建不同的样式表文件？

ps。我正在尝试创建一些我将拥有模板的东西......模板将有很多相同的数据，但样式不同......作为一个例子，如果我们拿一张成绩单......每个成绩单都有相同的数据，但它有不同的模板......所以我想为不同的模板创建不同的样式表......现在请回答。

【问题讨论】：

你能显示 styleSheet 包含的日志吗？？
也许这个链接会有帮助：Four ways to style react componentscodeburst.io/4-four-ways-to-style-react-components-ac6f323da822
我已经更新了帖子，请再看一遍。
那么您想要为每个组件实例添加不同的 css 文件？
是的，templateStyle 将决定每个组件的样式，每个样式表的值都会有所不同。

标签： css reactjs

【解决方案1】：

你不能简单地让规则匹配你的 CSS 中的每个 className 吗？喜欢：

.red {
 color: #ff0000;
 text-align: left;
}

等等？

【讨论】：

我正在尝试创建一些我将拥有模板的东西......简单的模板将有很多相同的数据，但样式不同......作为一个例子，如果我们拿一张成绩单......每张报告卡都有相同的数据，但它有不同的模板......所以我想为不同的模板创建不同的样式表......现在请回答。
看这个帖子好像是你要找的stackoverflow.com/questions/28386125/…

【解决方案2】：

您可以将该 CSS 文件作为 CSS 模块导入到您定义组件的文件中。

您可以了解更多关于CSS Module Stylesheet

只是一个简单的例子，你可以有一个 HelloWorld 组件，它有一个样式表文件，它的范围是这样的。

import React, { Component } from 'react';
// Here you import the CSS MODULE
import classes from './HelloWord.css';

class HelloWord extends Component {
    render() {
        return <div className={classes.HelloWord}>
            <h2 className={classes.red}>Hello World</h2>
        </div>
    }
}

在HelloWord.module.css 中，您可以根据需要定义任何 css 类\

.HelloWorld {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red {
    color: red;
}
// and so on

正如你所见，我在HelloWorld.module.css 文件中定义的所有类都在classes 变量中可用，因此您可以决定要将哪个 CSS 类选择器应用于 JSX 中的元素

【讨论】：

请阅读我已经更新的帖子..这样你就可以明白我到底在问什么？

【解决方案3】：

能够像这样添加 css..

useEffect(() => {
    var head = document.head;
    var link = document.createElement("link");

    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = process.env.PUBLIC_URL + "./styles/templates/" + templateStyle;

    head.appendChild(link);

    return () => { head.removeChild(link); }

}, [templateStyle]);

通过这个我可以动态添加css文件。

【讨论】：