对于样式化的组件，如何使所有组件样式级联为.hover组件样式？

如何解决对于样式化的组件，如何使所有组件样式级联为.hover组件样式？

例如，如果我有以下内容：

URL <- "https://www.intervista.ch/media/2020/03/Download_Mobilitäts-Monitoring_Covid-19.zip"   
h <- new_handle()
handle_setopt(h,ssl_verifyhost = 0,ssl_verifypeer=0)
curl_download(url=URL,"download_mobilitäts-monitoring_covid-19.zip",handle = h)
unzip("download_mobilitäts-monitoring_covid-19.zip",files = "Mittelwerte_und_Median_pro_Tag.csv")

我必须为未悬停和悬停的按钮重复边框颜色。如何避免出现重复的代码？我唯一的选择如下创建新样式的组件吗？

编辑：以下内容实际上无效，并且与上面相同。还在寻找建议！

import styled from "styled-components";
import Button as BootstrapButton from "react-bootstrap/Button";

export const Button = styled(BootstrapButton)`
  background-color: rgb(0,132,137);
  border-color: rgb(0,137);
  &:hover {
    background-color: rgb(23,112,115);
    border-color: rgb(0,137);
  }
`;

在这种情况下，我将在代码中使用export const Button = styled(BootstrapButton)` background-color: rgb(0,137); ` export const ImprovedButton = styled(Button)` &:hover { background-color: rgb(23,115); } `，但这似乎有些冗长（不过仍然比我的起源更好）。有什么想法吗？

解决方法

不确定您要问什么。在悬停时声明border-color的唯一原因是是否要更改其悬停状态下的border-color。

请参阅我创建的codesandbox。

我添加了一个悬停状态，它将在悬停时将边框颜色更改为蓝色。

如果要在悬停时保留原始边框颜色，只需将边框颜色保留在悬停之外，它将保持黑色。