Question

我正在创建一个ReactJs应用程序，并试图应用样式。我以正常方式加载样式（没有webpack css模块）：

import h5py
f1 = h5py.File('data_1.h5', 'r')
list(f1.keys())
X1 = f1['x']
y1=f1['y']
df1= np.array(X1.value)
dfy1= np.array(y1.value)
print (df1.shape)
print (dfy1.shape)

我为标头类使用的样式适用，并且所有内容都是古怪的。但是对于大约50％的ReactJs文件及其后续CSS文件而言，类样式不适用。也没有错误，它找到CSS，并且只在文件的 some 上不应用样式。

我不知道怎么了，谢谢！

编辑1 header.css文件：

import React, {Component} from 'react';

//styles
import './Header.css';

class Header extends Component {
render() {
    return(
        <div className='header'>
            <h1>Save</h1>
        </div>
    );
  }
}

编辑2 样式不适用的课程示例

Matrix.js：

 .header {
  width: 100%;
  top: 0;
  left:0;
  text-align: right;
  height: 100px;
  margin: 0 auto;
 }
 .header h1 {
  margin: 0;
  margin-right: 40px;
  cursor: pointer;
}

在这里，我的工作一直是使用内联样式，但是我想尽量避免这种做法

编辑3

看看Chrome中的开发工具，它表明我的CSS没有加载，因为它们是无效的属性值？

所以React正在加载样式，但是只是因为它们无效而拒绝显示？

Answer 1

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

Mac：Command + shift + R

Win：Ctrl + Shift + R

Answer 2

只是有完全相同的问题！

解决方案：删除属性值周围的引号（“）。

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

我应该每天都在CSS中工作。 VSCode也没有选择它。（面部护理）

只有少数CSS文件在React中应用其样式

2 个答案: