错误导入CSS类到react组件

Question

我想要一个黄色背景的卡片。无法从第一个代码得到它，但第二个工作正常。第一个代码有什么问题?

import styles from "/home/jatin/maylast/project1/src/index.css";
function Todo() {
return (
<div className={styles.card}>
<h2>Title</h2>
<div>
<button>Delete</button>
</div>
</div>
);
}

function Todo() {
return (
<div className='card'>
<h2>Title</h2>
<div>
<button>Delete</button>
</div>
</div>
);
}

Answer 1

尝试像这样传递styles.card:

import styles from "/home/jatin/maylast/project1/src/index.css";
function Todo() {
return (
<div style={styles.card}>
<h2>Title</h2>
<div>
<button>Delete</button>
</div>
</div>
);
}

不要忘记样式对象必须在" object "语法，而不是CSS语法详见:https://codesandbox.io/s/react-playground-forked-g87i4q?file=/index.js