【问题标题】: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

你的选择是

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

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

【讨论】:

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

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

React 中有两个组件

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

【讨论】:

    猜你喜欢
    • 2021-11-02
    • 1970-01-01
    • 2022-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-08
    • 2019-01-15
    • 2018-12-14
    相关资源
    最近更新 更多