CSS文件在React组件文件中不工作

Question

我在js文件中导入了css文件，但它没有改变我的代码的任何样式效果。我试图解决这个问题，但做不到。似乎一切都很好，但仍然不起作用。它不会对代码的任何部分产生样式效果。

. js文件:

import React from 'react';
import classes from './Cockpit.css';
const cockpit = (props) => {
let clases = [];
let btnClass = '';

if(props.showPersons) {
btnClass = classes.Red;
}
if (props.persons.length <= 2) {
clases.push(classes.red);
}
if (props.persons.length <= 1) {
clases.push(classes.bold);
}

return (
<div className={classes.Cockpitt}>
<h1>Hi, I'm a React App</h1>
<p className={clases.join(' ')}>This is really working!</p>
<button 
// style={style}
className={btnClass}
onClick={props.clicked}>Toggle Persons</button>
</div>
);
};
export default cockpit;

CSS文件:

.red {
color: red;
}

.bold {
font-weight: bold;
}

.Cockpitt button {
border: 1px solid blue;
padding: 16px;
background-color: green;
font: inherit;
color: white;
cursor: pointer;
}
.Cockpitt button:hover {
background-color: lightgreen;
color: black;
}
.Cockpitt button.Red {
background-color: red;
}
.Cockpitt button.Red:hover {
background-color: salmon;
color: black;
}

Answer 1

1. 不要在CSS中使用大写字母

2. 只使用import关键字，不需要获取它作为默认对象，也没有选项从它使用键，只是:

import './Cockpit.css';

对于动态类——使用JS代码来定义名称，而不是外部CSS文件如:

const classes = {...}
return (
<div className={isCockpitt ? classes.cockpitt : 'else-class'}>
<h1>Hi, I'm a React App</h1>
</div>
);

Answer 2

我已经解决了我的问题通过改变css文件名为:

import classes from './Cockpit.module.css';

问题解决了!