Question

在我的React App中，我试图通过将样式分配给类来从CSS样式表中加载html元素的样式。

我可以对元素进行样式化，例如h2，p，td，工作

问题：

我无法为类设计样式。

---更新：下面的代码似乎正在工作，并且我不确定是什么原因导致它之前失败。如果可以的话，我会删除这个问题。感谢您的帮助---

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super();
    }
  }

  render() {
    return (
      <div className="App">
        <div className="hide_me">
          <h2>This text should not be visible because it has className "hide_me"</h2>
        </div>
      </div>
    );
  }
}

export default App;

App.css

h2 {
  color: red;
}

.hide_me {
  display: none;
}

当前行为

我看到应该隐藏的红色文字，即

预期行为

没有文字！

有没有可以让我使用CSS样式表而无需安装新模块的解决方案？

Answer 1

没有有效的示例，很难说，但这是一个隐藏/显示切换示例（单击Run code snippet）。尝试将此示例复制/粘贴到您的项目中，然后查看它是否有效。如果不正确，则说明您的项目中未正确设置某些样式，导致样式表未正确导入。

class App extends React.Component {
  constructor(props) { 
    super(props);
    
    this.state = { clicks: 0, hidden: false };
    
    this.handleIncreaseClicks = this.handleIncreaseClicks.bind(this);
    this.handleButtonDisplay = this.handleButtonDisplay.bind(this);
  } 
   
  handleIncreaseClicks() {
    this.setState(state => ({ clicks: state.clicks + 1 }));
  }  
   
  handleButtonDisplay() {
    this.setState(state => ({ hidden: !state.hidden }));
  }

  render() {   
    return(
      <React.Fragment>
        <div className={`container ${this.state.hidden ? "hide-me" : ""}`}>
          <p className="label">Clicks:</p>
          <button 
            className="clicks" 
            onClick={this.handleIncreaseClicks}
          >
            {this.state.clicks}
          </button>
          <br />
        </div>
        <button 
          className="hide-show-button" 
          onClick={this.handleButtonDisplay}
        >
          {this.state.hidden ? "Show" : "Hide"} Clicks
        </button>
      </React.Fragment>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.label {
  font-weight: 700;
  margin-right: 10px;
}

.hide-show-button {
  cursor: pointer;
  margin: 0 5px;
  text-align: center;
  font-size: 14px;
  width: 100px;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #333333;
  transition: all 0.2s ease-in-out;
}

.hide-show-button {
  background-color: #f56342;
  color: white;
}

.hide-show-button:hover {
  background-color: #be391c;
}

.clicks {
  cursor: pointer;
  font-size: 14px;
  width: 100px;
  padding: 4px;
  border-radius: 3px;
  border: 1px solid #333333;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.clicks:hover {
  background-color: #c1c1c1;
}

.clicks:focus, .hide-show-button:focus {
  outline: 0;
}

.hide-me {
  display: none
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id='root'>
</div>

Answer 2

尝试阅读此官方文档。这将使您对react有深刻的理解-> https://reactjs.org/docs/getting-started.html。

Answer 3

在开发工具中检查h2，以查看它是否确实具有hide_me类。

Answer 4

我遇到了同样的问题。我的项目使用ASP.NET作为后端。当我在 webpack.config.js 文件中将模块更改为false时，将显示所有样式的类。应该是

options: {
    modules: false
}

Answer 5

我遇到了与您相同的问题，并通过强制刷新来解决。由于浏览器正在使用该页面的缓存版本，因此不会定期刷新新样式。缓存问题可能会解释这是如何神奇地消失的。

您可以强制刷新并通过按住Shift并单击Chrome或Firefox中的刷新按钮来清除单击的页面。

有关更多信息，请参见此article

来自CSS样式表的React类样式无法正常工作

5 个答案: