CODEWITHSUNDEEP
reactjsjsx
Qfactor
Qfactor

Reputation: 43

React jsx variable to element inline style not working

here my react code

const styles = {
  section: {
    paddingTop: '75px',
    paddingBottom: '3em',
  },
  loaderStyle: {
    zIndex: '999',
    height: '20em',
    width: '2em',
    overflow: 'show',
    margin: '12em auto auto auto',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
};
return (
  <div styles={styles.section}>
    <div styles={styles.loaderStyle} /> .......

react render

<div styles="[object Object]">
 <div styles="[object Object]">

why style value is [Object Object] ? it's my wrong? How to apply jsx variable to html style ?

Upvotes: 3

Views: 1423

Answers (1)

Jordan Running
Jordan Running

Reputation: 106047

You want style, not styles.

<div style={styles.section}>
  <div style={styles.loaderStyle}/>

Upvotes: 3

Related Questions