CODEWITHSUNDEEP
javascriptcssreactjsclasscomponents
VibrationPositive
VibrationPositive

Reputation: 410

React Component is not being styled by .Css file

My title component is not getting styled by its css file. I want it to have a green background. It is coming up white for some reason.

Here is the Component Js file:

import React from "react";

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

export default Title;

Here is the .Css file:

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

Here is the app.js file:

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;

Does anyone see why I cant get the Title to have for example a green background?

Upvotes: 0

Views: 39

Answers (1)

Shrey Joshi
Shrey Joshi

Reputation: 1206

Since you are trying to reference a class, you need to put ".Title" in your css instead of "title".

Upvotes: 1

Related Questions