My title component seems to be having trouble applying the CSS styles as expected. I'd like it to have a green background, but for some reason, it's displaying as white.
Below 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;
}
And 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;
Can anyone help me figure out why the Title component isn't showing a green background?