从css样式表反应类样式不起作用

Posted 2023-02-19

技术标签:

【中文标题】从css样式表反应类样式不起作用【英文标题】：React class styling from css stylesheet not working 【发布时间】：2019-08-27 22:55:45 【问题描述】：

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

我可以获得元素的样式，例如 h2、p、td、working

问题：

我无法为课程设置样式。

--- 更新：下面的代码似乎正在运行，我不确定是什么导致它之前失败。如果可以的话，我会删除这个问题。感谢那些帮助过的人---

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 样式表？

【问题讨论】：

嗯，这没有理由不工作。这似乎正在工作，我不知道为什么 :( 抱歉浪费您的时间。将其标记为已回答！ 【参考方案1】：

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

【讨论】：

我已通读此文档，但只能找到 reactjs.org/docs/… 关于 CSS 样式的信息，似乎并未涵盖 css 样式表。你可以用这个。这将帮助您设置组件的样式。 github.com/styled-components/styled-components 有不需要安装新模块的解决方案吗？【参考方案2】：

检查开发工具中的 h2 是否真的有 hide_me 类。

【讨论】：

我可以将 'hide_me' 类放在父 div 上，但问题仍然存在，是的，该类在开发工具中可见。【参考方案3】：

如果没有工作示例，很难说，但这里有一个隐藏/显示切换示例（单击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>

【讨论】：

【参考方案4】：

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