Как я могу сделать это с помощью sass и реагировать?

Question

У меня есть компонент, который отображает некоторые кнопки на странице.Для стилизации кнопок я использую .scss, чтобы классы выглядели так:

className={styles.tag}

, а соответствующий scss выглядит так:

.tagsContainer {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;


    .tag  {
        display: block;
        background-color: #f4f4f4;

        i {
            margin-left: 50px;
            font-size: 1.4em;
        }
    }

Я смотрел на этот codePen, который делаетчто я хочу, но использую обычный css: Добавление и удаление классов

Как я могу адаптировать этот код для более точного использования его с scss nad с помощью этого синтаксиса: {styles.tag}?

С уважением, Американо

ЭТО ОБНОВЛЕНИЕ: Я проверил этот код:

<div  onClick={(e) => { e.stopPropagation(); this.collectTags(tag); }}>
            <p className={`${this.state.addClass == true ? styles.tag : ""}`}
                ># {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i></p>
        </div>

присмотритесь к p-тегу.этот код меняет стиль onClick, но проблема в том, что меняются все p-теги в компоненте, а не только тот, который был нажат.

Answer 1

Все, что делает ссылка на стиль, это возвращает строку className, поэтому вы можете манипулировать ею так же, как и любой другой строкой.Вот общий пример:

// this can be any string, even an empty string to start
let testCircleClass = `${cssModule.infoCircle}`;
if(test > 0) {
  coursesCircleClass += ` ${cssModule.hasContent}`;
}

Так что вам, вероятно, понадобится что-то вроде:

1. Обработчик события для события click.
2. Состояние для обработкиесли это событие было обработано.
3. Чтобы затем связать styles.tag с этим состоянием, после активации.

Answer 2

Это то, что вы хотите?

class App extends React.Component {
  state = {
    addButtonClass: false
  };

  toggleClass = () => {
    this.setState({
      addButtonClass: !this.state.addButtonClass
    });
  };

  render() {
    const { addButtonClass } = this.state;
    return (
      <div className="App">
        <button
          className={`button ${addButtonClass ? " button--red" : ""}`}
          onClick={this.toggleClass}
        >Click me </button>
      </div>
    );
  }
}

style.scss

.button {
  font-size: 24px;
  color: white;
  background-color: green;

  &--red {
    background-color: red;
  }
}