Можно ли полученные в пропсах селекторы использовать с Sass modules в React?

Question

[Zhanna_K]

Хочу инкапсулировать стили кнопки. Как мне полученные из props селекторы передать в className вместо selectorOne, selectorTwo, если я использую модули?

Или как в этом случае поступают нормальные люди?

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

[Zhanna_K]

Решила:

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;

Так всё работает!