i can't target className in react. I try to target it with div className="navbar"> and .navbar { align-items: center; } but it doesnt work.
div{
display: block;
background-color: rgb(211, 57, 57);
font: sans-serif;
color: #white;
}
li {
list-style: none;
display: block;
align-items: center;
}
ul {
display: block;
box-sizing: border-box;
}
.navbar {
align-items: center;
}
and navbar.js `
`
import React from 'react'
import './Navbar.css'
const Navbar = () => {
return (
<div className="navbar">
<ul className="ul">
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
)
}
export default Navbar
The rule align-items: center; is connected to using Flexbox, on itself it won't do much. Edit to match:
.navbar {
display: flex;
align-items: center;
}
Also remember that the default way for flex is to arrange the children horizontally, and align-items moves the children vertically in that case. If you want the children to stack vertically, you should add flex-direction: column;
Your index.html should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/App.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
React has nothing to do with your css. You can use react to modify your css and you can use npm packages like material-ui to do the styling for you. But since you are clearly not doing either of those things, the above solution is the correct one.