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

【问题标题】：Only a few CSS files apply their styles in React只有少数 CSS 文件在 React 中应用它们的样式
【发布时间】：2019-03-20 05:52:47
【问题描述】：

我正在创建一个 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 正在加载样式，但只是因为它们无效而拒绝显示？

【问题讨论】：

你能提供一个minimal reproducible example 来显示不起作用的代码吗？
你能把头css文件也发一下吗？
@Auriga 添加了 header.css。这里真的没有什么疯狂的事情，只是一堂课
问题的文本说标题类有效。你能发布一个不起作用的类的例子吗？
在 chrome 开发工具中，您的样式值似乎被包装为字符串。您是否不小心在某些 css 文件中这样做了？

标签： css reactjs

【解决方案1】：

假设其他一切工作正常，例如导入正确的 css 文件、使用 className 等。我发现，在极少数情况下，浏览器缓存中会出现一些问题，需要完全刷新。

Mac：Command+shift+R

赢：Ctrl+shift+R

【讨论】：

你有matrix.css的副本吗？
另一个问题...导入行和文件名是否相同？如果导入要求 Header.css 并且文件名是 header.css，则有时会导致问题
导入和文件名大小写相同
根据您更新的帖子，样式似乎被覆盖，可能是浏览器默认设置。您可以浏览其余的开发工具，它应该会显示样式的实际来源。作为一个坏主意，您可以将 !important 设置为一个 css 项目，但这是一个非常糟糕的主意
是的，我想尽量避免这种情况。奇怪的是，如果我使用内联样式它可以正常工作，但是当我尝试导入所有内容时都会中断

【解决方案2】：

刚刚遇到了同样的问题！

解决方案：删除属性值周围的引号 (")。

JS 中的内联样式需要它们，但 CSS 不需要。

我每天都在 CSS 中工作，我应该知道这一点。 VSCode 也没有选择它。（捂脸）

【讨论】：