React中mdb.min.css与自定义CSS冲突及样式不生效问题求助

问题描述 #

在React项目中遇到mdb.min.css与自定义CSS冲突的问题：

• mdb.min.css中的margin-top: 0;导致header布局错乱，元素无法完美居中；关闭该样式后布局恢复正常。
• 尝试删除mdb.min.css中的这行代码，但执行npm start启动服务器后，元素审查发现margin-top: 0;仍会恢复。
• 在header的自定义CSS中设置align-items: center !important，但完全没有效果。

相关代码 #

JavaScript代码

import classes from "./Navbar.module.css";
import UserComponent from "./UserNavComponent/UserNavComponent";
import { Link } from "react-router-dom"

const HeaderComponent = (props) => {
    return (
    <header className={classes.header}>
      <nav className="nav">
        <ul className={classes.navList}>
          <li>
            <Link to="/">Text2Read</Link>
          </li>
          <li>
            <Link to="/History">History</Link>
          </li>
        </ul>
        <div className={classes.loginContainer}>
            <UserComponent></UserComponent>
        </div>
      </nav>
    </header>
  );
};

export default HeaderComponent;

CSS代码

header{
  background-color: #1F1F20;
  border-bottom: solid;
  border-color: #252526;
}
header nav{
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: space-between !important;

}
.navList{
  list-style-type: none;
  display: flex;
  flex-flow: row nowrap;
}
.navList a {
  text-decoration: none;
  color: black;
  padding: 15px;
  padding-top: 100%;
  font-size: 20px;
  color: #ffff !important;
}

.navList a:hover{
  background-color: #027DF0 !important;
  transition: 0.5s !important;
} 
svg{
  color: #ffff;
  margin-left: 10px;
  font-size: 30px;
}
select{
  width: 100px;
}
.loginContainer{
  padding-right: 40px;
  align-items: center;
}
main {
  min-height: 88vh;
}

问题解答 #

1. 删除的样式为什么会恢复？ #

直接修改node_modules目录下的mdb.min.css文件无效，因为：

• node_modules是依赖包的安装目录，每次执行npm start、npm install或重新构建项目时，npm会从包源重新拉取完整的MDB库文件，覆盖你手动修改的内容。
• 永远不要直接修改node_modules中的文件，这类修改是临时的、不可维护的，也无法通过版本控制同步。

2. 自定义align-items: center !important为什么不生效？ #

主要有两个原因：

• 选择器优先级不足：你的CSS选择器是header nav，而MDB的.nav类选择器优先级更高，导致你的样式被覆盖。
• 子元素高度异常：navList a中设置的padding-top: 100%会让链接元素高度被异常撑开，即使align-items: center生效，视觉上也看不出居中效果——因为子元素高度远大于父容器。

修复方案

• 移除navList a中的padding-top: 100%，保留统一的padding: 15px即可；
• 提高自定义样式的优先级，比如使用更具体的选择器：

  /* 利用header的模块类提高优先级，同时覆盖MDB的margin-top */
  .header nav.nav {
    margin-top: initial !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  

• 建议给nav元素添加自定义类名，替代MDB的nav类，从根源减少样式冲突。

内容的提问来源于stack exchange，提问作者Acarys