Full-Stack React Projects - Second Edition

Defining styles with StyleSheet

In index.js, we will update the default styles generated in the initial React 360 project to add our own CSS rules. In the StyleSheet.create call, we will define style objects to be used with the components in the game, as shown in the following code:

/MERNVR/index.js

const styles = StyleSheet.create({                 completeMessage: {                      margin: 0.1,                      height: 1.5,                      backgroundColor: 'green',                      transform: [ {translate: [0, 0, -5] } ]                 },                 congratsText: {                      fontSize: 0.5,                      textAlign: 'center',                      marginTop: 0.2                 },                 collectedText: {                      fontSize: 0.2,                      textAlign: 'center'                 },                 button: {                      margin: 0.1,                      height: 0.5,                      backgroundColor: 'blue',                      transform: [ { translate: [0, 0, -5] } ]                 },                 buttonText: {                      fontSize: 0.3,                      textAlign: 'center'                 }              }) 

For the game ...