使用道具和变量在样式化组件中变亮

Question

我想做什么

使用props或从lighten中的polished导入的styled-component变量。

问题

&:hover{
    background:${(props) => lighten(0.7, props.btn_back)};
  }
`;

比方说，我想在光标悬停在按钮上时更改颜色。按钮的颜色由props决定，因此我在props函数内部使用了lighten。但是，它发生了语法错误。实际上，我尝试编写$lighten(0.7, props.btn_back)，$lighten(0.7, ${props.btn_back})等...，但是效果不佳。

我想告诉我如何在花括号或props函数中使用lighten吗？

非常感谢您。

=== === === ===

我在下面粘贴其他代码。

function MiddleButton(props) {
  return (
    <StyledButton
      type={props.btn_type}
      onClick={props.btn_click}
      onSubmit={props.btn_submit}
      disabled={props.btn_disable}
      btn_back={props.btn_back}
      btn_text_color={props.btn_text_color}
      btn_shadow={props.btn_shadow}
    >
      {props.btn_name}
    </StyledButton>
  );
}

export default MiddleButton;

const StyledButton = styled.button`
  height: 45px;
  width: 250px;
  font-size: 1.18em;
  font-weight: 550;
  padding: 2px 3.5px;
  border-radius: 10px;
  background: ${(props) => props.btn_back};
  color: ${(props) => props.btn_text_color};
  box-shadow: 4px 3px ${(props) => props.btn_shadow};
  outline: none;

  &:hover{
    background:${(props) => lighten(0.7, props.btn_back)};
  }
`;