Reactjs 对于已设置样式的组件，如何使所有组件样式级联到.hover组件样式？

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

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, 132, 137);
  &:hover {
    background-color: rgb(23, 112, 115);
    border-color: rgb(0, 132, 137);
  }
`;

我必须为非悬停按钮和悬停按钮重复边框颜色。如何避免重复代码？我唯一的选择是创建一个新的样式化组件，如下所示

编辑：以下内容实际上不起作用，与上面的内容相同。仍在寻找建议

export const Button = styled(BootstrapButton)`
  background-color: rgb(0, 132, 137);
  border-color: rgb(0, 132, 137);
`

export const ImprovedButton = styled(Button)`
  &:hover {
    background-color: rgb(23, 112, 115);
  }
`

---

在本例中，我将在代码中使用

ImprovedButton

，但这似乎有点冗长（尽管仍比我的源代码好）。有什么想法吗？

不知道你在问什么。在悬停状态下声明

边框颜色

的唯一原因是，如果要在悬停状态下更改

边框颜色

看看我创造的

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

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