React不导入css文件

Question

我遵循了相同的结构与我的。js和。css文件在他们的模板，但它没有导入/使用我的css。我只得到它的工作时，css是在同一文件。我哪里做错了?

. js:

import React from 'react';
import './Testcss.css';
export default function TestFunction(){
return (
<div class="ParentDiv">
<div class="SubDiv">
<h3>Some random text</h3>                
</div>
</div>
)
}

Testcss.css:

.SubDiv {
border: 'green';
background-color: 'orange';
padding: "5px";
max-width: '300px';
font-size: 'small';
margin: '15px';
line-height: '2px';
color: 'black';
vertical-align: 'top';

}
.ParentDiv {
background-color: "#282c34";
min-height: "100vh";
vertical-align: 'top';
}

谢谢!

Answer 1

导入看起来很好，但是您在组件中的div上使用了错误的语法。在react中，你想使用className而不是class (docs here)

尝试重构成

import React from 'react';
import './Testcss.css';
export default function TestFunction(){
return (
<div className="ParentDiv">
<div className="SubDiv">
<h3>Some random text</h3>                
</div>
</div>
).  
}

Answer 2

将class改为className。在css文件中，去掉'和"，应该是border: green;