How to pass boolean from html to scss mixin in react project

Ike Anya 0
Viewed 21

I don't know if this is possible with SCSS but I'm trying, how do I pass a react boolean variable of true to an scss mixin?

My React component, Here I pass a variable from the react-html side to scss

type Props = {
  isGrey?: boolean;
  isOrange?: boolean;
};

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

My Sass code, Here I try to use the boolean passed from the React code in a mixin, but it doesn't work

@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;
}

Any help will be much appreciated...

scss-mixins sass reactjs
1 Answers

Maybe I'm just oldskool, but I'd stay away from even attempting something like this and just stick with a classical way of changing the style of your elements, specifically something like a button.

I'd just have your base button style

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

Then make use of some additional classes to change the style based on the boolean.

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

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

Within your component then just append the additional class based on the boolean.

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

It's cleaner and easier to read.

Tim B James0
Related