如何在反应项目中将布尔值从html传递到scss mixin答案

【问题标题】：How to pass boolean from html to scss mixin in react project如何在反应项目中将布尔值从html传递到scss mixin
【发布时间】：2022-09-22 21:11:59
【问题描述】：

我不知道 SCSS 是否可行，但我正在尝试，如何传递一个反应布尔变量真的对一个scss 混合?

我的反应组件，在这里，我将一个变量从 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>
  );
}

我的 Sass 代码，在这里，我尝试在 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;
}

任何帮助都感激不尽...

标签： reactjs sass scss-mixins

【解决方案1】：

也许我只是 oldskool，但我什至不会尝试这样的事情，而是坚持使用经典的方式来改变元素的样式，特别是像按钮这样的东西。

我只需要你的基本按钮样式

.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>
  );

它更干净，更易于阅读。

【讨论】：