React+JS+SCSS场景下如何清除按钮背景色？

问题出在浏览器对<button>元素自带默认背景样式（属于user-agent stylesheet），而<a>标签默认没有这类背景样式，所以即便你的CSS没设置背景色，按钮依然会显示默认背景。

只需在按钮的CSS规则里显式添加背景色重置代码即可解决：

button.navButton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 15px;
  transition: background-color 0.3s ease;
  border: 0;
  background-color: transparent; /* 清除按钮默认背景色 */
}

button.navButton:hover {
  background-color: $background-color-hover;
}

如果需要按钮继承父元素的背景色，可将transparent替换为inherit。另外也可以使用all: unset;一次性重置所有浏览器默认样式，但该属性会清除包括布局、字体等所有默认设置，需根据实际场景选用。

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