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