1.ts

// Current setup is a all styles go in a single file w/ a single flat `[element name]: { styles for that element }` block:

export const defaultStyles = {
  quizHeader: {
    display: 'flex',
  },

  quizHeaderLogo: {
    background: '',
  },

  quizNextButton: {
    cursor: 'crosshair',
  }
}

2.ts

// We could introduce a layer of nesting if we want to, and just do a deep merge when mixing in the custom styles.
// This option shows still a single file for styles.

// All elements stylings inside the quiz header go here
const quizHeader = {
  root: {
    display: 'flex',
  },

  logo: {
    background: '',
  },
},

const quiz = {
  nextButton: {
    cursor: 'crosshair',
  },
}


// Combine them all here into 1 object
export const defaultStyles = {
  quiz,
  quizHeader,
}
```

3.ts

// We don't need to put all styles in one file.  
// For example the styles could live next to the component.
// This keeps the style names in a flat namespace (e.g. every one is unique), which makes for simple of custom styles

//
// components/Header/styles.ts
//
export const quizHeaderRoot {
  display: 'flex', 
}

export const quizHeaderLogo {
  background: '',
}


// The component would just need to do something like
import * as styles from './styles'

<img style={{...styles.quizHeaderRoot, this.props.customStyles.quizHeaderRoot}} />


// A global file could pull in all the styles in one place, allowing us to build a type of all elements
import * as quizHeader from './components/Header/styles'
import * as footer from './components/Foot/styles'
export { ...quizHeader, ...footer }

4.ts

// Combination of 2 and 3, styles live close to their component and names don't need to be unique by adding an extra layer of nesting.


//
// components/Header/styles.ts
//
export const root {
  display: 'flex', 
}

export const logo {
  background: '',
}


// The component would just need to do something like
import * as styles from './styles'

<img style={{...styles.root, this.props.customStyles.quizHeader.root}} />


// A global file could pull in all the styles in one place, allowing us to build a type of all elements
import * as quizHeader from './components/Header/styles'
import * as footer from './components/Foot/styles'
export { quizHeader, footer }