Why do not add css style in my react project?

user_7177849 0
Viewed 54

I do make a style in my react project. Like as

style.css:

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

}

and my react component is:

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


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

But why I can not change anything in my project?

reactjs css javascript
2 Answers

I think you misstype the className prop. It should be className not ClassName using capital C.

Try changing it from this

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

into this:

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

I guess there is a typo error on ClassName use className.

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


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

For inline css use the code as <h1 style={{ background-color: purple;text-align: center; }} >Todo List</h1>

user_139689030
Related