CODEWITHSUNDEEP
htmlcssreactjsjsx
bsky
bsky

Reputation: 20222

Text color can not be made white

I have the following JSX code:

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

Where the styles used are these:

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

As it can be seen, I specified color: 'white !important' both in the h2 containning the text and the enclosing div.

However, the component still looks like this:

enter image description here

Any idea why the text can not be made white?

I made a fiddle for it here.

Upvotes: 0

Views: 44

Answers (1)

Fadi Abo Msalam
Fadi Abo Msalam

Reputation: 7187

correct syntax 

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

Upvotes: 1

Related Questions