React应用中CSS类样式继承与background-image属性覆写问题

我一眼就发现问题啦——你的CSS选择器和实际DOM结构不匹配，导致.return-home按钮的样式根本没被应用上！

问题根源 #

你给React Router的Link组件加了className="return-home"，而Link最终渲染出来的是带有return-home类的<a>标签，对应的DOM结构是这样的：

<a class="return-home" href="/"></a>

但你的CSS里写的是.return-home a，这个选择器的意思是「找所有class为return-home的元素内部的<a>标签」，可实际情况是<a>标签本身就带着return-home类，所以这个选择器完全匹配不到目标元素，样式当然不生效啦。

修复方案 #

修改CSS选择器，把针对嵌套a标签的写法改成直接匹配类名，同时优化样式结构，避免重复代码：

/* 先定义两个按钮的通用样式 */
.open-search, .return-home {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #2e7d32;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  font-size: 0;
}

/* 分别设置各自的背景图 */
.open-search {
  background-image: url('./icons/add.svg');
}

.return-home {
  background-image: url('./icons/arrow-back.svg');
}

这样修改后，Link组件渲染出的<a class="return-home">就能正确匹配到样式，背景图也会替换成你想要的箭头图标，同时还复用了所有通用样式，完全符合你的需求~

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