对于带样式的组件，如何让所有组件样式级联到 .hover 组件样式？

Question

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

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，但这似乎有点冗长（不过仍然比我的起源好）。有什么想法吗？

Answer 1

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

查看我创建的 codesandbox。

我添加了悬停状态，悬停时 border-color 变为蓝色。

如果您想在悬停时保持 original-border 颜色，只需让 border-color 离开悬停状态，它就会保持黑色。

对于带样式的组件，如何让所有组件样式级联到 .hover 组件样式？

For styled components, how can I make all component styles cascade to .hover component styles?

reactjs

react-bootstrap

styled-components