Css 为什么我的样式化组件转换不起作用？

我正在做一个Next.js项目，点击汉堡按钮打开菜单。为此，我在按钮上切换一个类，该类的样式使用样式化组件

当我点击按钮时，它会像预期的那样改变，但是当我添加CSS转换时，它仍然没有动画。我用香草HTML测试了相同的代码，效果很好

我哪里出错了

这是我的代码：

汉堡js：

<BurgerStyled
    onClick={() => setIsBurgerOpen(!isBurgerOpen)}
    className={BurgerOpen}
>
    <span />
    <span />
    <span />
</BurgerStyled>

样式化组件：

const BurgerStyled = styled.div`
    width: 32px;
    height: 21px;
    position: relative;

    span {
        position: absolute;
        left: 0;
        background-color: var(--gray);
        width: 100%;
        height: 3px;
        transition: all 0.3s ease;

        &:first-child {
            top: 0;
        }

        &:nth-child(2) {
            top: calc(50% - 3px / 2);
        }

        &:last-child {
            bottom: 0;
        }
    }

    &.BurgerOpen span {
        &:first-child {
            transform: rotate(45deg);
        }

        &:nth-child(2) {
            width: 0;
        }

        &:last-child {
            transform: rotate(-45deg);
        }
    }
`;

---

谢谢你的回答

您可以将属性传递给您的样式化组件，如下所示：

JSX:

返回(
setIsBurgerOpen（！isBurgerOpen）}
open={isBurgerOpen}
>
);

风格：

const BurgerStyled = styled(({ open, ...restProps }) => <div {...restProps} />)`
  ${({ open }) => open ? ` styles open here ` : ` styles closed here `};
`;

const BurgerStyled=styled（{open，…restProps}）=>）`
${（{open}）=>open？`styles open here`:`styles closed here`}；
`;

---

这里要做的是：将

open

道具传递给样式化组件，然后将所有其他道具传递给div。

open

道具现在在样式模板字符串中可用。这会阻止将

open

属性传递给DOM元素，因为

DOM元素没有

open

属性，因此将其传递给DOM将导致警告。

您可以尝试

svg

并进行转换以获得所需的输出。检查下面的示例代码，它可能会帮助您

  import { motion } from './framer-motion'; //install it with npm     
  
  const [isBurgerOpen, setIsBurgerOpen] = useState(false);
  const HamburgerMenuContainer = styled.div`
     display:flex;
  `;

  const MenuContainer = styled.div`
  min-width:300px;
  width:100%;
  max-width:44%;
  height:100%;
  background-color: #fff;
  box-shadow: -2px 0 2px rgba(15,15,15,0.3);
  z-index:90;
  position:fixed;
  top:0;
  right:0;
  user-select:none;
  padding: 1em 2.5em;
  `;

  const Button = styled.button`
  z-index:99;
  cursor:pointer;
  `;
  
  const Path = props =>{
    <motion.Path fill="transparent" strokeLinecap="round" strokeWidth="3" {...props}/>
  }

const transition = {duration: 0.3};
  return (
    <>
      <HamburgerMenuContainer>
        <Button onClick={() => setIsBurgerOpen(true)}>
        <svg width="23" height="23" viewBox="0 0 23 23">
          <Path animate={isBurgerOpen ? "open" : "closed"} initial={false} variants={{
            closed: {d: "M 2 2.5 L 20 2.5",stroke:"hsl(0, 0%, 100%)"},
            open: {d: "M 3 16.5 L 17 2.5",stroke:"hsl(0, 0%, 18%)"},
          }} 
          transition={transition}
          />
          <Path animate={isBurgerOpen ? "open" : "closed"} initial={false} variants={{
            closed: {d: "M 2 2.5 L 20 2.5",stroke:"hsl(0, 0%, 100%)"},
            open: {d: "M 3 16.5 L 17 2.5",stroke:"hsl(0, 0%, 18%)"},
          }} 
          transition={transition}
          />
          <Path animate={isBurgerOpen ? "open" : "closed"} initial={false} variants={{
            closed: {d: "M 2 2.5 L 20 2.5",stroke:"hsl(0, 0%, 100%)"},
            open: {d: "M 3 16.5 L 17 2.5",stroke:"hsl(0, 0%, 18%)"},
          }} 
          transition={transition}
          />
        </svg>
        </Button>
      </HamburgerMenuContainer>
      </>
  );
}

从“/framer motion”导入{motion}//用npm安装它
const[isBurgerOpen，setIsBurgerOpen]=useState（false）；
const hamburgermenucainer=styled.div`
显示器：flex；
`;
const MenuContainer=styled.div`
最小宽度：300px；
宽度：100%；
最大宽度：44%；
身高：100%；
背景色：#fff；
盒影：-2px02pxRGBA（15,15,15,0.3）；
z指数：90；
位置：固定；
排名：0；
右：0；
用户选择：无；
填料：1米2.5米；
`;
const Button=styled.Button`
z指数：99；
光标：指针；
`;
常量路径=道具=>{
}
常量转换={duration:0.3}；
返回(
setIsBurgerOpen（真）}>
);
}

我可以解决这个问题。我的汉堡成分在标题外，如下所示：

function Header() {
    const Burger = () => {
        // Burger component
    }

    return (
        <Burger />
    )
}

函数头（）{
康斯特汉堡=（）=>{
//汉堡成分
}
返回(
)
}

我就是这样说的，它成功了：

function Header() {
    return (
        <BurgerStyled ...>
            <span />
            <span />
            <span />
        </BurgerStyled>
        // Content header
    )
}

函数头（）{
返回(
//内容头
)
}

---

现在动画工作了，谢谢你的回答

我认为CSS转换只适用于

悬停

选择器。

function Header() {
    const Burger = () => {
        // Burger component
    }

    return (
        <Burger />
    )
}

function Header() {
    return (
        <BurgerStyled ...>
            <span />
            <span />
            <span />
        </BurgerStyled>
        // Content header
    )
}