使用带有样式组件的条件语句

Question

我正在尝试设置我的 PaymentBtn 样式，其中包括我的主要样式按钮，但我只希望在激活我的 isLoading 道具时影响 hover 效果，同时保持所有内容相同，除了 hover 效果。 有没有办法只改变 hover 效果的样式？

基本按钮

export const BaseBtn = styled.button`
  min-width: 165px;
  width: auto;
  height: 50px;
  letter-spacing: 0.5px;
  line-height: 50px;
  padding: 0 35px 0 35px;
  font-size: 15px;
  background-color: black;
  color: white;
  text-transform: uppercase;
  font-family: "Open Sans Condensed";
  font-weight: bolder;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    background-color: white;
    color: black;
    border: 1px solid black;
  }
`;

支付宝 styles

export const PaymentBtn = styled(Button)`
  margin-left: auto;
  margin-top: 30px;
`;

我想要这样的东西，但不知道如何将它与样式组件一起使用

export const PaymentBtn = styled(Button)`
  margin-left: auto;
  margin-top: 30px;

&:hover {
 ${({isLoading}) => isLoading ? 
  hover:{
    background-color: "gray" : "black"
  }
}
`;

Answer 1

你可以试试这个：

export const PaymentBtn = styled(Button)`
  margin-left: auto;
  margin-top: 30px;

  &:hover { 
    background-color: ${props => (props.isLoading ? 'gray' : 'black')}
  }
`;

当isLoading为真时，这将在 hover 上显示gray ，否则将显示black 。 如果您不想在false上使用任何颜色，请将其设置为transparent 。

Answer 2

export const BaseBtn=styled.button<{isLoading:boolean}>`
....
  isLoading && ::hover{
    background-color: gray;
....
  }
`

我认为这可能有效

Answer 3

实际上，我确实找到了一种可行的方法，我很想听听其他人的解决方案

const PaymentBtnHover = css`
  &:hover {
    background-color: gray;
  }
`;
export const PaymentBtn = styled(Button)`
  margin-left: auto;
  margin-top: 30px;

  ${({ isLoading }) => isLoading && PaymentBtnHover}
`;