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

我一直在寻找可以完成我想要的但正在使用普通CSS的codePen：Adding and removing classes

如何通过以下语法将代码修改为与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

这就是你想要的吗？

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

Answer 2

所有样式引用所做的只是返回一个字符串className，因此您可以像对待其他任何字符串一样对其进行操作。这是一个通用示例：

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

所以您可能需要类似的东西：

click事件的事件处理程序。
要处理此事件的状态。
在激活后将styles.tag绑定到此状态。

我该如何用混蛋来做这件事并做出反应？

2 个答案: