Why can't target class in react-CodePudding

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

CodePudding user response：

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;

CodePudding user response：

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.