Can props-derived selectors be used with Sass modules in React?

Question

Sass

I want to encapsulate button styles. How can I pass selectors obtained from props to className instead of selectorOne, selectorTwo if I use modules?

Or how do normal people act in this case?

import React from "react";
import classNames from "classnames";
import styles from "./_submit.module.scss";

const SubmitButton = ({ handleClick, text, ...selectors }) => {
  return (
     <button className={classNames(styles.selectorOne, styles.selectorTwo)} onClick={handleClick}>
      {text}
    </button>
  );
};

export default SubmitButton;

_submit.module.scss

@import "utils/_config.scss";

.btn {
  @include h3;
  cursor: pointer;
  border-radius: 22px;
  height: 44px;
}

.outlined {
  color: $purple;
  border: 1px solid $purple;
}
.contained {
  color: white;
  background: $gradient;
  border: none;
}

Answer 1

Decided:

import React from "react";
import classNames from "classnames";
import styles from "./_submit.module.scss";
const SubmitButton = ({ handleClick, text, selector }) => {
  let isOutlined;
  selector === "contained" ? (isOutlined = false) : (isOutlined = true);
  return (
    <button
      className={classNames(
        { [styles.contained]: !isOutlined },
        { [styles.outlined]: isOutlined },
        { [styles.btn]: true }
      )}
      onClick={handleClick}
    >
      {text}
    </button>
  );
};

export default SubmitButton;

That's how it all works!