只有少数CSS文件在React中应用它们的样式?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (207)

我正在创建一个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>
    );
  }
}

我对标题类的样式适用,一切都很常规。但是对于大约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正在加载样式,但只是因为它们无效而拒绝显示?

提问于
用户回答回答于

假设其他一切都正常工作,如导入正确的css文件,使用className等。我发现,在极少数情况下,某些东西会卡在浏览器缓存中并需要完全刷新。

Mac:Command + shift + R.

赢:Ctrl + shift + R.

所属标签

可能回答问题的人

  • 应用案例分享

    1 粉丝490 提问5 回答
  • uncle_light

    5 粉丝518 提问4 回答
  • o o

    4 粉丝495 提问4 回答
  • 学生

    8 粉丝476 提问3 回答

扫码关注云+社区

领取腾讯云代金券