Question

我有一个应用程序，在两个页面上有两个相似的按钮。一个用于进入我的搜索页面，另一个用于返回主页，简单。

我遇到的问题是我需要background-image值不同，但我不想复制其余的样式。如何继承或覆盖background-image属性。

我已尝试过以下内容，但它似乎无法正常工作，并且没有为.return-home呈现按钮

链接：

<Link
  to='/'
  className="return-home">
</Link>

App.css

.open-search, .return-home a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #2e7d32;
  background-image: url('./icons/add.svg');
  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;
}

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

Answer 1

您可以在css选择器的不同实例中提供图像。

.open-search, .return-home{
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #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');
}

React app继承了类之间CSS的样式

1 个答案: