javascript - 为什么不在我的 react 项目中添加 css 样式？

Question

我确实在我的反应项目中制作了一种风格。就像

样式.css：

.headingStyle {
  background-color: purple;
  text-align: center;

}

我的反应组件是：

import React from 'react'
import  '../cse_component/style.css'


export default function heardTitle() {
    return (
        <div>
            <h1 ClassName='headingStyle'>Todo List</h1>
        </div>
    )
}

但是为什么我不能在我的项目中改变任何东西？

Answer 1

我想你打错了className道具。className它不应该ClassName使用大写 C。

尝试从这里改变它

<h1 ClassName='headingStyle'>Todo List</h1>

进入这个：

<h1 className='headingStyle'>Todo List</h1>

Answer 2

ClassName我想使用时有一个拼写错误className。

import React from 'react'
import  '../cse_component/style.css'


export default function heardTitle() {
    return (
        <div>
            <h1 className='headingStyle'>Todo List</h1>
        </div>
    )
}

对于内联 css，将代码用作<h1 style={{ background-color: purple;text-align: center; }} >Todo List</h1>