React-Bootstrap自定义CSS无法居中Row CodeSandbox运行正常原因问询

相同代码在CodeSandbox正常、本地无法生效，通常是以下几种原因导致：

• CSS引入顺序错误：本地项目如果先引入了自定义CSS，再引入react-bootstrap的全局样式，bootstrap自带的Row默认样式优先级更高，会覆盖你写的.roomfac规则；而CodeSandbox默认自定义样式加载顺序靠后，所以可以正常生效
• 版本差异：CodeSandbox中安装的react-bootstrap、bootstrap版本和本地项目版本不一致，不同大版本（比如v4和v5）的Row默认margin、布局规则存在差异，会导致样式不兼容
• 父容器干扰：本地项目中当前<Container fluid>外层还有其他父元素设置了限制宽度、overflow、对齐规则等属性，影响了内部Row的居中计算；CodeSandbox测试时只有你贴的这段代码，没有外层元素干扰
• 冗余样式冲突：你给Row额外加了display: flex和justify-content: center，但Row本身默认就是flex布局，多余的规则可能和bootstrap自带的flex布局逻辑冲突，部分版本下会抵消margin: auto的居中效果

• 调整CSS引入顺序，把自定义CSS文件的引入语句放在bootstrap全局CSS的引入语句之后，保证自定义样式优先级更高
• 简化.roomfac样式，删除冗余属性，修改为如下代码即可：

.roomfac {
    width: 60%;
    margin: 0 auto;
}

• 临时给Row加行内样式验证是否是优先级问题：<Row style={{width: '60%', margin: '0 auto'}} className="fontReg">，如果生效则确认是自定义CSS优先级不足导致
• 核对本地和CodeSandbox的react-bootstrap、bootstrap版本，保持两者一致，避免版本差异带来的样式兼容问题
• 也可以直接用bootstrap内置工具类实现，不需要额外写自定义CSS：给Row加mx-auto类，同时设置style={{width: '60%'}}即可实现居中效果

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