只有少数CSS文件在React中应用其样式
只有少数CSS文件在React中应用其样式
提问于 2018-10-16 02:39:50
我正在创建一个ReactJs应用程序，并尝试应用样式。我以正常的方式加载样式(没有webpack css模块)：
import React, {Component} from 'react';
//styles
import './Header.css';
class Header extends Component {
render() {
return(
<div className='header'>
<h1>Save</h1>
</div>
);
}
}应用我为header类提供的样式，一切都很棒。但是对于我的大约50%的ReactJs文件和它们的后续CSS文件，类样式并不适用。也没有错误，它会找到CSS，只是不会将样式应用于某些文件。
我不知道出了什么问题，谢谢！
编辑1 header.css文件：
.header {
width: 100%;
top: 0;
left:0;
text-align: right;
height: 100px;
margin: 0 auto;
}
.header h1 {
margin: 0;
margin-right: 40px;
cursor: pointer;
}编辑2样式不适用的类的示例
Matrix.js：
import './Matrix.css';
render() {
const {users, selectedDivision} = this.state;
return(
<div className='container' style={{display:'grid', gridTemplateColumns:'200px 1fr'}}>
<div style={{textAlign: 'left'}}>
<input type='text' placeholder="Search Divisions" onChange={(e)=>this.search(e)} className='searchDivs'/>
<Scroller divisions={this.state.displayDivisions} handleSelectedDivisionChange={this.handleSelectedDivisionChange.bind(this)} />
</div>
<div style={{marginLeft: '10px'}}>
<Division division={selectedDivision} users={users} addToParentDivisions={this.handleNewUserAddedToDivision.bind(this)}/>
</div>
</div>
);
}在这里，我的工作是使用内联样式，但我希望尽量避免使用内联样式作为最佳实践
编辑3
看看Chrome中的开发工具，它显示我的css没有加载，因为它们是无效的属性值？
所以React正在加载样式，但是因为样式无效而拒绝显示？
回答 2
Stack Overflow用户
发布于 2019-11-12 15:01:46
只是遇到了完全相同的问题！
解决方案:删除属性值两边的引号(")。
JS中的内联样式需要它们，但CSS不需要。
我每天都在CSS中工作，我应该知道这一点。VSCode也没有拿起它。(Facepalm)
Stack Overflow用户
发布于 2018-10-16 03:23:13
假设其他一切都正常工作，比如导入正确的css文件，使用className等。我发现，在极少数情况下，浏览器缓存中的某些内容会被卡住，需要完全刷新。
Mac: Command+shift+R
赢家: Ctrl+shift+R
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52822894
复制相关文章
相似问题