文字颜色不能变白

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'
  }
};

正如可以看到的，我在color: 'white !important'包含文本和封闭h2中指定了div。

但是，该组件仍然如下所示：

知道为什么文字不能变白？

我为它做了一个小提琴here.

Answer 1

正确的语法

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