Themes

  • Use an abstraction layer such as react-with-styles that enables theming. react-with-styles gives us things like withStyles(), ThemedStyleSheet, and css() which are used in some of the examples in this document.

    Why? It is useful to have a set of shared variables for styling your components. Using an abstraction layer makes this more convenient. Additionally, this can help prevent your components from being tightly coupled to any particular underlying implementation, which gives you more freedom.

  • Define colors only in themes.

    1. // bad
    2. export default withStyles(() => ({
    3.   chuckNorris: {
    4.     color: '#bada55',
    5.   },
    6. }))(MyComponent);
    8. // good
    9. export default withStyles(({ color }) => ({
    10.   chuckNorris: {
    11.     color: color.badass,
    12.   },
    13. }))(MyComponent);

  • Define fonts only in themes.

    1. // bad
    2. export default withStyles(() => ({
    3.   towerOfPisa: {
    4.     fontStyle: 'italic',
    5.   },
    6. }))(MyComponent);
    8. // good
    9. export default withStyles(({ font }) => ({
    10.   towerOfPisa: {
    11.     fontStyle: font.italic,
    12.   },
    13. }))(MyComponent);

  • Define fonts as sets of related styles.

    1. // bad
    2. export default withStyles(() => ({
    3.   towerOfPisa: {
    4.     fontFamily: 'Italiana, "Times New Roman", serif',
    5.     fontSize: '2em',
    6.     fontStyle: 'italic',
    7.     lineHeight: 1.5,
    8.   },
    9. }))(MyComponent);
    11. // good
    12. export default withStyles(({ font }) => ({
    13.   towerOfPisa: {
    14.     ...font.italian,
    15.   },
    16. }))(MyComponent);

  • Define base grid units in theme (either as a value or a function that takes a multiplier).

    1. // bad
    2. export default withStyles(() => ({
    3.   rip: {
    4.     bottom: '-6912px', // 6 feet
    5.   },
    6. }))(MyComponent);
    8. // good
    9. export default withStyles(({ units }) => ({
    10.   rip: {
    11.     bottom: units(864), // 6 feet, assuming our unit is 8px
    12.   },
    13. }))(MyComponent);
    15. // good
    16. export default withStyles(({ unit }) => ({
    17.   rip: {
    18.     bottom: 864 * unit, // 6 feet, assuming our unit is 8px
    19.   },
    20. }))(MyComponent);

  • Define media queries only in themes.

    ```js
    // bad
    export default withStyles(() => ({
    container: {

    1. width: '100%',
    3. '@media (max-width: 1047px)': {
    4.   width: '50%',
    5. },

    },
    }))(MyComponent);

    // good
    export default withStyles(({ breakpoint }) => ({
    container: {

    1. width: '100%',
  1.     [breakpoint.medium]: {
  2.       width: '50%',
  3.     },
  4.   },
  5. }))(MyComponent);
  6. ```

  • Define tricky fallback properties in themes.

    Why? Many CSS-in-JavaScript implementations merge style objects together which makes specifying fallbacks for the same property (e.g. display) a little tricky. To keep the approach unified, put these fallbacks in the theme.

    ```js
    // bad
    export default withStyles(() => ({
    .muscles {

    1. display: 'flex',

    },

    .muscles_fallback {

    1. 'display ': 'table',

    },
    }))(MyComponent);

    // good
    export default withStyles(({ fallbacks }) => ({
    .muscles {

    1. display: 'flex',

    },

    .muscles_fallback {

  1.     [fallbacks.display]: 'table',
  2.   },
  3. }))(MyComponent);
  5. // good
  6. export default withStyles(({ fallback }) => ({
  7.   .muscles {
  8.     display: 'flex',
  9.   },
  11.   .muscles_fallback {
  12.     [fallback('display')]: 'table',
  13.   },
  14. }))(MyComponent);
  15. ```

  • Create as few custom themes as possible. Many applications may only have one theme.

  • Namespace custom theme settings under a nested object with a unique and descriptive key.

    1. // bad
    2. ThemedStyleSheet.registerTheme('mySection', {
    3.   mySectionPrimaryColor: 'green',
    4. });
    6. // good
    7. ThemedStyleSheet.registerTheme('mySection', {
    8.   mySection: {
    9.     primaryColor: 'green',
    10.   },
    11. });

CSS puns adapted from Saijo George.