.Css 文件未设置 React 组件的样式答案

【问题标题】：React Component is not being styled by .Css file.Css 文件未设置 React 组件的样式
【发布时间】：2020-11-17 06:01:46
【问题描述】：

我的标题组件没有被它的 css 文件设置样式。我希望它有一个绿色的背景。由于某种原因，它变成了白色。

这里是组件 Js 文件：

import React from "react";

function Title() {
  return (
    <div className="Title">
      <h1>Welcome to ZXY Gallery</h1>
    </div>
  );
}

export default Title;

这是.css文件：

/*  src/Title.css  */
title {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  justify-content: center;
  padding: 1em;
  margin-bottom: 2em;
  background-color: green;
}

这里是 app.js 文件：

import React from "react";
// import Split from "react-split";
import SplitPane from "react-split-pane";
import "./App.css";
import Title from "./Title";
import "./Title.css";

function App() {
  return (
    <div>
      <Title />
      <SplitPane
        split="vertical"
        minSize={50}
        defaultSize={parseInt(localStorage.getItem("splitPos"), 10)}
        onChange={size => localStorage.setItem("splitPos", size)}
      >
        <div style={{ height: "75%", backgroundColor: "red", border: "5%" }}>
          <h1>This Area is Highly Toggleable</h1>
        </div>
        <div style={{ height: "85%", backgroundColor: "yellow", border: "5%" }}>
          <h1>
            We love these
            <a target="_blank" href="http://chillcastle.com/art">
              <h1>Artists</h1>
            </a>
            They have shown with us in the past.
          </h1>
        </div>
      </SplitPane>
    </div>
  );
}

export default App;

有人知道为什么我不能让标题具有例如绿色背景吗？

【问题讨论】：

标签： javascript css reactjs class components

【解决方案1】：

由于您尝试引用一个类，因此您需要在您的 CSS 中放入“.Title”而不是“title”。

【讨论】：