Zhanna_K
@Zhanna_K
in progress

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

Хочу инкапсулировать стили кнопки. Как мне полученные из 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;
}
  • Вопрос задан
  • 27 просмотров
Решения вопроса 1
Zhanna_K
@Zhanna_K Автор вопроса
in progress
Решила:
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;


Так всё работает!
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 нояб. 2020, в 09:30
250 руб./за проект
28 нояб. 2020, в 08:40
10000 руб./за проект
28 нояб. 2020, в 01:16
5000 руб./за проект