在 react 中为特定组件添加 style.css答案

【问题标题】：Add style.css for a specific component in react在 react 中为特定组件添加 style.css
【发布时间】：2020-10-03 06:51:32
【问题描述】：

我正在尝试为 react 中的特定组件添加 CSS 文件，但 CSS 文件适用于所有组件如何为特定组件添加 style.css？

import React, { Component } from "react";
import { Link } from "gatsby";
import Layout from "../components/layout"
import Footer from "../components/Globals/Footer"
import "./crm2.css"


class Crm extends Component {
    render() {
      ...
    }
}

【问题讨论】：

CSS 普遍应用于全球。您能否在Crm 中包含 CSS 样式以及您要设置的样式？ *.css 文件有有个替代品。

标签： reactjs react-component

【解决方案1】：

您可以参考此链接，旁白正在解释您为 React 组件设置样式的选项。 Styling in React

你的选择是

内嵌样式
使用变量
通过组件内的函数或方法进行样式设置

看过视频链接后，您就会知道哪种方法最适合您。

【讨论】：

投了反对票，因为答案中没有任何信息可以帮助 OP。链接是 youtube 视频。如果链接源被删除或编辑，答案是否可以包含链接源的信息。

【解决方案2】：

您的 CSS className 必须是唯一的。如果您为此类编写 CSS，那么它将应用于指定的组件。

React 中有两个组件

内置组件（如<p>、<div>、<span>等）
React 组件（如<App/>、<Product> 等）

React 组件允许您将 UI 分解为不同的部分，以便可以重复使用和单独处理它。它是点符号组件，如<UserContext.Provider> 和任何以大写字母开头的组件。

如果您为这些组件提供唯一的 className 并为此编写 CSS 样式，则可以设置这些组件的样式。

您可能已经为内置组件设置样式，如下所示

style.css 文件：

p {
font-size:14px;
color: red;
}

使用上述方法，CSS 将应用于所有 JSX 文件中的所有 <p> 组件。

如果您想为 React 组件设置样式，那么您需要选择这些组件并为其设置样式，如下所示。

<Product className = "items" />

CSS 是

.items {
   color: red;
   ...
}

【讨论】：