为什么不能在反应中定位类答案

【问题标题】：Why can't target class in react为什么不能在反应中定位类
【发布时间】：2021-11-18 12:11:47
【问题描述】：

我无法在 react 中定位 className。我尝试使用div className="navbar"> 和.navbar { align-items: center; } 来定位它，但它不起作用。

    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;
}

和 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

【问题讨论】：

您必须将 css 添加到 html 中。 w3schools.com/css/css_howto.asp
那就是javascript。但我使用反应：prnt.sc/2006wfk 我的 Index.html 代码是完全不同的文件，有
反应注入和反应不呈现 index.html 因为这是我的反应代码@987654323 @这是html代码prnt.sc/2007afv
React 只是带有附加功能的 javascript，以方便您使用。您使用 css 的方式与在 js 中的反应方式相同。另外，我是说你应该将 css 添加到 index.html 文件中，而不是任何 .js 文件中。
请阅读上面的编辑。 React 在 div id root 中注入，但在我的 index.html 中，我的 index.js 文件中有一个旋转的 Create react App，只有一个导航栏，当我转到 localhost:3000 时，只有那个导航栏（没有 Create react app） .

标签： javascript reactjs navbar

【解决方案1】：

align-items: center; 规则与使用 Flexbox 相关，它本身不会做太多事情。编辑以匹配：

.navbar {
  display: flex;
  align-items: center;
}

还要记住，flex 的默认方式是水平排列子元素，align-items 在这种情况下垂直移动子元素。如果你想让孩子垂直堆叠，你应该添加flex-direction: column;

【讨论】：

我也使用了 justify-content: space-between 但空格是 6cm 长，如何在水平项目之间添加 0.5cm 空格？

【解决方案2】：

您的 index.html 应该如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="/App.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

React 与你的 CSS 无关。你可以使用 react 来修改你的 css 并且你可以使用像 material-ui 这样的 npm 包来为你做样式。但是由于您显然没有做任何这些事情，因此上述解决方案是正确的。

【讨论】：