Scss mixin 边框动画在样式化组件中的工作方式不同，在 React 中，为什么？

Question

当我将动画与scs一起使用时，它可以工作，如下所示：

@mixin magicBorder($width, $color, $duration, $direction){
position:relative;
&:before{
content:'';
position:absolute;
width:calc(100% + #{$width * 2});
height:calc(100% + #{$width * 2});
top:calc(#{$width}/-1);
left:calc(#{$width}/-1);
background:linear-gradient(to right, $color 0%, $color 100%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 0%, $color 100%), linear-gradient(to left, $color 0%, $color 100%);
background-size: 65% $width, $width 200%, $width  200%, 0% $width, 0% $width;
background-position: -150% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
background-repeat:no-repeat, no-repeat;
transition:transform $duration ease-in-out, background-position $duration ease-in-out, background-size $duration ease-in-out;
transform:scaleX(0) rotate(180deg * $direction);
transition-delay:$duration*2, $duration, 0s;
}
&:hover{
&:before{
background-size:200% $width, $width 400%, $width 400%, 55% $width, 55% $width;
background-position:50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
transform:scaleX(1) rotate(180deg * $direction);
transition-delay:0s, $duration, $duration*2;
}
}
}
@include magicBorder(2px, red, 1s, 1);

但当我尝试在样式组件中实现它时，它不起作用，比如这样

const MagicBorder = ({ width, color, duration, direction }) => css`
position: relative;
&:before {  
position: absolute;  
content: "";
width: calc(100% + ${width} * 8);
height: calc(100% + ${width} * 2);
top: calc(${width} / -10);
left: calc(${width} / -1);
background: linear-gradient(to right, ${color} 0%, ${color} 100%),
linear-gradient(to top, ${color} 50%, transparent 50%),
linear-gradient(to top, ${color} 50%, transparent 50%),
linear-gradient(to right, ${color} 0%, ${color} 100%),
linear-gradient(to left, ${color} 0%, ${color} 100%);
background-size: 65% ${width}, ${width} 200%, ${width} 200%, 0% ${width}, 0% ${width};
background-position: -150% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
background-repeat: no-repeat;
transition: transform ${duration} ease-in-out,
background-position ${duration} ease-in-out,
background-size ${duration} ease-in-out;
transform: scaleX(0) rotate(180deg * ${direction});
transition-delay: ${duration}*2, ${duration}, 0s;
}
&:hover {
&:before {
background-size: 200% ${width}, ${width} 400%, ${width} 400%, 55% ${width}, 55% ${width};
background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
transform: scaleX(1) rotate(180deg * ${direction});
transition-delay: 0s, ${duration}, ${duration} * 2;
}
} 
`;
${MagicBorder({ width: '3px', color: 'rgba(121, 214, 250, 0.9)', duration: '1s', direction: '1' })};

当在样式化组件中使用时，转换中的某些内容不会很好地转换，我不知道不起作用的是什么

使用我在下面写的准备好的示例将动画应用于div，并查看差异：

scs示例：

style {
.magic-border {
height: 50px;
width: 300px;
@include magicBorder(2px, red, 0.3s, 0);
}
<div class="magic-border></div>

样式组件示例：

const StyledDiv = styled.div`
height: 50px;
width: 300px;
${MagicBorder({ width: '3px', color: 'rgba(121, 214, 250, 0.9)', duration: '1s', direction: '1' })};
`
<StyledDiv></StyledDiv>

任何帮助都会很棒：(`

Answer 1

我想您只是忘记了在calc中封装过渡持续时间计算，例如

${duration} * 2  

应该是

calc(${duration}*2)