html - 文字颜色不能做成白色

Question

我有以下 JSX 代码:

  <div style={Object.assign({}, styles.occupyAllScreen, styles.backgroundContainer)}>
    <div styles={styles.overimposingText}>
      <h2 styles={{color: 'white !important'}}>
        Hi everyone!
      </h2>
    </div>
  </div>

使用的样式是这些:

const styles = {
  occupyAllScreen: {
    width: '100%',
    height: '100%'
  },
  backgroundContainer: {
    position: 'relative',
    backgroundColor: 'black',
    textAlign: 'center'
  },
  overimposingText: {
    position: 'absolute',
    color: 'white !important'
  }
};

可以看出，我在包含文本的 h2 和封闭的 div 中都指定了 color: 'white !important' .

但是，组件仍然是这样的:

知道为什么文本不能变成白色吗？

我为它做了一个 fiddle here.

Answer 1

正确的语法

<h2 style={{color: 'white'}}>
      Hi everyone!
    </h2>