如何在react项目中将布尔值从html传递给scss mixin

Question

我不知道SCSS是否可能做到这一点，但我正在尝试，如何将true的react布尔变量传递给scs-mixin？

我的React组件，在这里，我将一个变量从react html端传递给scss

type Props = {
isGrey?: boolean;
isOrange?: boolean;
};
export default function Button({ isGrey, isOrange }: Props) {
return (
<div className="button" style={{ '--isGrey': true }} >
{isGrey.toString()}
</div>
);
}

我的萨斯密码，在这里，我尝试在mixin中使用React代码传递的布尔值，但它不起的作用

@mixin button-style($isGrey: false) {
// @error $isGrey; // this prints "--isGrey" on screen, I need it to print true 
@if $isGrey == true {
border: 2px solid #d5d5d5;
} @else {
border: 2px solid red;
}
}
.button {
@include button-style($isGrey: --isGrey);
height: 50px;
width: 100%;
border-radius: 4px;
}

任何帮助都将不胜感激。。。

Answer 1

也许我只是个老古董，但我甚至不会尝试这样的东西，只会坚持用经典的方式来改变元素的风格，特别是像按钮这样的东西。

我只想要你的基本按钮式

.button {
height: 50px;
width: 100%;
border-radius: 4px;
}

然后使用一些额外的类来更改基于布尔值的样式。

.btn-primary {
border: 2px solid #d5d5d5;
}
.btn-secondary {
border: 2px solid red;
}

在您的组件中，只需根据布尔值附加额外的类。

return (
<div className=`button ${isGrey ? 'btn-Primary' : 'btn-Secondary'}`>
{isGrey.toString()}
</div>
);

它更干净，更容易阅读。