Why Can't I style this react component-CodePudding

I'm having a problem styling this component. I have added some styles but they are not reflecting. What might be the problem?

import React,{useContext} from 'react'
import "./display.css"
import { AppContext } from '../App'


const Display = () => {

    const styles={
        backgroundColor:"white"
    }
    const{type, stateWord,definition,synonyms}=useContext(AppContext)
  return (
    <div styles={styles} className='container'>
        <section styles={styles}>
 {stateWord && <div style={{color:"white"}}><h4> Word Type: {type}</h4>
 <h4>Definition : {definition}</h4>
 <h4>Synonyms:</h4>
 {synonyms.map((syn)=>{
     return<div><h4>{syn}</h4></div> 
 })}

  </div> 
 }

        </section>

    </div>
  )
}

export default Display

CodePudding user response：

You have written styles instead of style in your divs. Should be style={styles}.

import React,{useContext} from 'react'
import "./display.css"
import { AppContext } from '../App'

const Display = () => {

 const styles={
     backgroundColor:"white"
 }
 const{type, stateWord,definition,synonyms}=useContext(AppContext)
 
 return (
     <div style={styles} className='container'>
         <section style={styles}>
         {stateWord && <div style={{color:"white"}}>
         <h4> Word Type: {type}</h4>
         <h4>Definition : {definition}</h4>
         <h4>Synonyms:</h4>
         {synonyms.map((syn)=>{
             return<div><h4>{syn}</h4></div> 
         })}
     </div> 
 }

    </section>
</div>
)}

export default Display

CodePudding user response：

It's because you misspelled style:

styles={styles}

should be

style={styles}