从css样式表反应类样式不起作用
Posted
技术标签:
【中文标题】从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 时,所有样式的类都出现了。应该是
options:
modules: false
【讨论】:
【参考方案5】:我遇到了与您相同的问题,并通过强制刷新进行了修复。由于浏览器正在使用该页面的缓存版本,因此不会在定期刷新时应用新样式。缓存问题可能会为您解释这如何神奇地消失了。
您可以通过在 Chrome 或 Firefox 中按住 shift 单击刷新按钮来强制刷新并清除页面点击。
更多信息请参考article
【讨论】:
以上是关于从css样式表反应类样式不起作用的主要内容,如果未能解决你的问题,请参考以下文章
CSS/JS 在 HTML 中不起作用,错误:MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型