为react中的特定组件添加style.css

Question

我正试图为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() {
...
}
}

Answer 1

您可以参考此链接，叙述者在该链接上解释您为React组件设置样式的选项。React 中的造型

您的选择是

1. 联机样式
2. 使用变量
3. 通过组件内部的函数或方法进行造型

一旦你看了视频链接，你就会知道什么方法最适合你。

Answer 2

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

React 中有两个组件

1. 内置组件(如<p>、<div>、<span>等(
2. 反应组件(如<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;
...
}