setSheetOrder not having an impact on some stylesheets

[rosskevin]

I cannot seem to get ui-Contact-ItemListEdit to be added to the DOM after rfmui-Text. I cannot isolate why this particular one is a problem.

Sheet order:

const SHEET_ORDER = [
  "Layout",
  "Collapse",
  "Fade",
  "Slide",
  "Backdrop",
  "Modal",
  "Ripple",
  "TouchRipple",
  "ButtonBase",
  "FormLabel",
  "FormGroup",
  "Text",
  "Paper",
  "Divider",
  "Popover",
  "Button",
  "IconButton",
  "SvgIcon",
  "SwitchBase",
  "Switch",
  "Checkbox",
  "Radio",
  "RadioGroup",
  "SwitchLabel",
  "Dialog",
  "DialogActions",
  "DialogContent",
  "DialogContentText",
  "DialogTitle",
  "TabIndicator",
  "Tab",
  "Tabs",
  "BottomNavigationButton",
  "BottomNavigation",
  "CircularProgress",
  "LinearProgress",
  "AppBar",
  "Drawer",
  "ListItem",
  "ListItemText",
  "ListItemSecondaryAction",
  "ListSubheader",
  "List",
  "Menu",
  "MenuItem",
  "Avatar",
  "CardContent",
  "CardMedia",
  "CardActions",
  "CardHeader",
  "Card",
  "TextFieldLabel",
  "TextFieldInput",
  "TextField",
  "Table",
  "TableHead",
  "TableRow",
  "TableCell",
  "TableBody",
  "TableSortLabel",
  "Toolbar",
  "rfmui-Text",              // <=== first
  "rfmui-Autocomplete",
  "rfmui-DatePicker",
  "rfmui-HelperTexts",
  "rfmui-Select",
  "ui-Contact-ItemListEdit"  // <==== last
]

Element:

Added styles:

Any thoughts on that?

[rosskevin]

I edited this block to add some quick logging:

    if (sheetOrder && !jssOptions.hasOwnProperty('index')) {
      var index = sheetOrder.indexOf(name);
      console.log('[styleManager] ' + name, index)
      if (index === -1) {
        jssOptions.index = sheetOrder.length;
      } else {
        jssOptions.index = index;
      }
    }

It shows a bunch of sheets not found:

[styleManager] Backdrop 4
styleManager.js:146 [styleManager] DialogContent 26
styleManager.js:146 [styleManager] ui-Contact-ItemListEdit -1
styleManager.js:146 [styleManager] ui-List-ListItemElements -1
styleManager.js:146 [styleManager] rfmui-Text -1
styleManager.js:146 [styleManager] FormControl -1
styleManager.js:146 [styleManager] InputLabel -1
styleManager.js:146 [styleManager] FormLabel 9
styleManager.js:146 [styleManager] Input -1
styleManager.js:146 [styleManager] rfmui-HelperTexts -1
styleManager.js:146 [styleManager] ui-createError -1
styleManager.js:146 [styleManager] DialogActions 25
styleManager.js:146 [styleManager] rfmui-Select -1

So it appears that my styleManager.setSheetOrder() isn't having an impact. When I dumped sheetOrder I see that only material-ui sheets have been added.

[rosskevin]

I'm setting sheet order in my app like this:

import {MUI_SHEET_ORDER} from 'material-ui/styles/MuiThemeProvider'

export const SHEET_ORDER = MUI_SHEET_ORDER.concat([
  'rfmui-Text',
  'rfmui-Autocomplete',
  'rfmui-DatePicker',
  'rfmui-HelperTexts',
  'rfmui-Select',
  'ui-Contact-ItemListEdit'
])

const { styleManager, theme } = MuiThemeProvider.createDefaultContext({
  theme: createMuiTheme({ palette })
})

styleManager.setSheetOrder(SHEET_ORDER)

In the debugger, I see the original sheetOrder (from mui) has 61 elements. I see the call in the debugger to setSheetOrder with an array that has 67 elements. Upon usage of the component in question, the sheetOrder is still 61 so there is a bug in setting the order.

[rosskevin]

More logging when setting the sheet vs rendering a sheet shows:

> [App] sheetOrder length before: 61
> [App] sheetOrder length after: 67
> [App] SHEET_ORDER ["Layout","Collapse","Fade","Slide","Backdrop","Modal","Ripple","TouchRipple","ButtonBase","FormLabel","FormGroup","Text","Paper","Divider","Popover","Button","IconButton","SvgIcon","SwitchBase","Switch","Checkbox","Radio","RadioGroup","SwitchLabel","Dialog","DialogActions","DialogContent","DialogContentText","DialogTitle","TabIndicator","Tab","Tabs","BottomNavigationButton","BottomNavigation","CircularProgress","LinearProgress","AppBar","Drawer","ListItem","ListItemText","ListItemSecondaryAction","ListSubheader","List","Menu","MenuItem","Avatar","CardContent","CardMedia","CardActions","CardHeader","Card","TextFieldLabel","TextFieldInput","TextField","Table","TableHead","TableRow","TableCell","TableBody","TableSortLabel","Toolbar","rfmui-Text","rfmui-Autocomplete","rfmui-DatePicker","rfmui-HelperTexts","rfmui-Select","ui-Contact-ItemListEdit"]

> [styleManager] ui-App-AppFrame -1 sheetOrder length: 61

I tried adding an alias to jss-theme-reactor but that seemed to have no effect

[rosskevin]

All signs point to me having two different styleManagers. With that, it finally appeared more obviously that I was not providing the configured styleManager to the MuiThemeProvider.