Реакция переменной jsx на встроенный стиль элемента не работает

Question

здесь мой код реакции

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} /> .......

реагирует на визуализацию

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

почему значением стиля является [Object Object]? это моя ошибка? Как применить переменную jsx к стилю html?

Answer 1

Вы хотите style, а не styles.

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