React中无法通过className选中元素设置样式是什么原因？

你遇到的样式不生效问题有两个核心原因：

• align-items 是 Flex/Grid 布局专属属性，你当前.navbar的display属性继承了全局div的block值，导致该属性完全不生效
• CSS代码存在语法错误：color: #white;写法错误，颜色关键字不需要加#前缀，该规则会直接失效

修复方案 #

方案1：用Flex布局实现居中效果

如果需要让导航栏内部元素垂直居中，修改.navbar的CSS规则，补充display: flex属性：

.navbar {
    display: flex;
    align-items: center;
    /* 可选：让导航栏内部元素水平居中 */
    justify-content: center;
}

如果需要让导航项横向排列，修改ul的CSS规则：

ul {
    display: flex;
    gap: 24px; /* 自定义导航项之间的间距 */
    box-sizing: border-box;
    padding: 0; /* 清除ul默认的左内边距 */
}

方案2：不用Flex实现水平居中

如果仅需要让ul整体在导航栏内水平居中，不需要修改布局模式，给ul添加margin规则即可：

.navbar ul {
    width: fit-content;
    margin: 0 auto;
    padding: 0;
}

必做：修复语法错误

把全局div样式中的错误规则修改为：

div{
    display: block;
    background-color: rgb(211, 57, 57);
    font-family: sans-serif; /* 原font属性写法不规范，建议改为font-family */
    color: white; 
}

生效验证 #

修改后打开浏览器开发者工具的元素面板，选中.navbar元素，查看样式面板中对应的规则是否正常显示，没有被划掉即代表规则已生效。

内容的提问来源于stack exchange，提问作者Dominik Jędrychowski