I am working on some JSX code which looks like the following:
<div style={Object.assign({}, styles.occupyAllScreen, styles.backgroundContainer)}>
<div styles={styles.overimposingText}>
<h2 styles={{color: 'white !important'}}>
Hi everyone!
</h2>
</div>
</div>
The styles being used in this code are as follows:
const styles = {
occupyAllScreen: {
width: '100%',
height: '100%'
},
backgroundContainer: {
position: 'relative',
backgroundColor: 'black',
textAlign: 'center'
},
overimposingText: {
position: 'absolute',
color: 'white !important'
}
};
Despite specifying color: 'white !important' for both the h2 text and its enclosing div, the component is still displaying the text differently.
This is how the component appears currently:
Any insights on why the text color cannot be changed to white?
You can view a demo of the issue here.