将 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]">

为什么样式值是[对象对象]？ 这是我的错？如何将 jsx 变量应用于 html 样式？

Answer 1

你想要style，而不是styles。

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