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

发布于 2025-02-12 23:02:58 字数 1034 浏览 0 评论 0原文

我正在尝试为我的Paymentbtn设计样式，其中包括我的主要样式按钮，但我只希望在激活我的载荷道具时会影响悬停效果，同时使所有内容保持相同，除了悬停效果。有没有办法只能改变悬停效果的样式？

基本的按钮

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;
  }
`;

paymenthbtn样式

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"
  }
}
`;

原文

I'm trying to style my PaymentBtn which includes my main styled Button but I only want the hover effect to be affected when my isLoading prop is activated while keeping everything the same EXCEPT the hover effect. Is there a way to only change the styling on the hover effect?

Basic button

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;
  }
`;

PaymentBtn styles

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

I want something like this but don't know how to use it with styled-components

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜空下最亮的亮点 2025-02-19 23:02:58

您可以尝试以下操作：

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

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

当isloading是真的，否则，它将显示black时，这将显示灰色颜色。如果您不需要false上的任何颜色，请将其设置为透明。

You can try this:

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

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

This will show gray color on hover when isLoading is true, otherwise, it will show black. If you don't want any color on false, set it as transparent.

回复收藏 0 原文

生生漫 2025-02-19 23:02:58

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

我认为这可能会起作用

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

I think this might work

回复收藏 0 原文

东走西顾 2025-02-19 23:02:58

我实际上确实找到了一种有效的方法，我很想用您的解决方案从别人那里听到

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

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

I actually did find a method that works and I would love to hear from others with your solution

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

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

回复收藏 0 原文

~没有更多了~