[英]React class styling from css stylesheet not working
In my React App, I am trying to load styles for html elements from a CSS stylesheet by assigning styles to classes.在我的 React 应用程序中,我试图通过将样式分配给类来从 CSS 样式表加载 html 元素的样式。
I can get styling for elements, such as h2, p, td, working我可以获得元素的样式,例如 h2、p、td、working
Problem:问题:
I cannot get styling for classes to work.我无法为课程设置样式。
--- UPDATE: The below code appears to be working, and I am not sure what caused it to fail before. --- 更新:下面的代码似乎正在运行,我不确定之前是什么导致它失败。 I'd delete this question if I could.
如果可以,我会删除这个问题。 Thank you for those that helped ---
感谢帮助过的人——
App.js应用程序.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应用程序.css
h2 {
color: red;
}
.hide_me {
display: none;
}
Current Behavior当前行为
I see text in red that should be hidden ie我看到应该隐藏的红色文本,即
Expected behaviour预期行为
No text!没有文字!
Is there a solution that allows me to use CSS stylesheets without installing a new module?有没有一种解决方案可以让我在不安装新模块的情况下使用 CSS 样式表?
Without a working example, it's hard to say, but here's a hide/show toggle example (click Run code snippet
).没有工作示例,很难说,但这里有一个隐藏/显示切换示例(单击
Run code snippet
)。 Try copying/pasting this example into your project and seeing if it works.尝试将此示例复制/粘贴到您的项目中并查看它是否有效。 If it doesn't, then there's something not set up properly with your project, where stylesheets aren't being properly imported.
如果没有,则说明您的项目设置不正确,样式表未正确导入。
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>
I ran into the same issue as you and fixed by doing a forced refresh.我遇到了和你一样的问题,并通过强制刷新来解决。 New styles aren't applied on a regular refresh since the browser is using the cached version of that page.
由于浏览器使用的是该页面的缓存版本,因此不会在定期刷新时应用新样式。 A cache issue might explain how this magically went away for you.
缓存问题可能会解释它是如何神奇地消失的。
You can do a force refresh and clear the page click by shift-clicking the refresh button in Chrome or Firefox.您可以通过在 Chrome 或 Firefox 中按住 Shift 键并单击刷新按钮来执行强制刷新并清除页面点击。
检查开发工具中的 h2 以查看它是否真的有 hide_me 类。
I faced a same problem.我遇到了同样的问题。 My project had ASP.NET as a backend.
我的项目有 ASP.NET 作为后端。 When I changed modules to false in my webpack.config.js file, all styles of classes showed up.
当我在webpack.config.js文件中将modules 更改为 false 时,所有样式的类都会出现。 It should be
它应该是
options: {
modules: false
}
Try reading this official documentation.尝试阅读此官方文档。 This will give you a solid understanding of react -> https://reactjs.org/docs/getting-started.html .
这将使您对 react -> https://reactjs.org/docs/getting-started.html有一个深入的了解。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.