next.js 如何在样式化组件中的单个组件内创建双className

pb3skfrl 于 2023-04-20 发布在其他

关注(0)|答案(1)|浏览(190)

我试着让这个代码
style.css

.slide {
  opacity: 0;
  transition-duration: 1s ease;
}

.slide.active {
  opacity: 1;
  transition-duration: 1s;
  transform: scale(1.08);
}

和

<div
  className={index === current ? 'slide active' : 'slide'}
  key={index}
>
  {index === current && (
    <img src={slide.image} alt='travel image' className='image' />
  )}
</div>

我希望你们能帮助我回答这个问题，或者至少如何使用css，以便它可以被用作过渡。

next.js

来源：https://stackoverflow.com/questions/76004072/how-to-make-a-double-classname-inside-of-an-single-component-in-a-styled-compone

1条答案

按热度按时间

6ojccjat1#

您可以将组件创建为样式化组件，然后根据isActive属性更改值。

const Slide = styled.div`
  opacity: ${(props) => (props.$isActive ? 1 : 0)};
  transition-duration: ${(props) => (props.$isActive ? "1s" : "1s ease")};
  transform: ${(props) => (props.$isActive ? "scale(1.08)" : "inherit")};
`;

<Slide $isActive>Hello World!</Slide>
// or
// <Slide $isActive={true|false}>Hello World!</Slide>

赞(0）回复(0）举报 2023-04-20

我来回答

next.js 如何在样式化组件中的单个组件内创建双className

1条答案

相关问题

热门标签

最新问答