Unable to apply a product theme to UI

[mkhtran]

I'm trying to apply a theme to my components as described in https://alteryx.github.io/alteryx-ui/#/Utils/AyxAppWrapper, but nothing I've tried has worked.

Tool versions

No clue if this is the culprit, but I'm using Node 16 and npm 9. I've tried both Node 14 and Node 16 without any difference, and didn't bother trying to get webpack to work with >16. Documents say that npm 6 is supported, but I get a lot of TypeScript errors (DesignerApi and AyxAppWrapper are not valid JSX; property "options" does not exist on Autocomplete; etc) even though it runs fine. I was able to install using npm 9 with "--legacy-peer-deps" enabled and have found no differences.

I'm using `ayx_plugin_cli` version 1.1.0, and I created the plugin with `--use-ui`.

Sample Code

const myTheme = {
  typography: {
    fontFamily: 'Comic Sans MS'
  },
  overrides: {
    MuiButton: {
      contained: {
        backgroundColor: 'hotpink'
      }
    }
  }
}

const App: FunctionComponent = () => {
  return (
    <div>
      <Typography>Hello, world!</Typography>
      <Button variant='contained'>Button</Button>
    </div>
  )
}

const Tool: FunctionComponent = () => {
  return (
    <DesignerApi messages={{}} defaultConfig={{}}>
      <AyxAppWrapper theme={myTheme}>
        <App />
      </AyxAppWrapper>
    </DesignerApi>
  )
}

The `myTheme` doesn't seem to do anything though, and the default Alteryx styles are still applied. I've tried other attempts to merge the themes as well, without success.

import { ThemeProvider, useTheme } from '@alteryx/ui'

// @Alteryx/ui doesn't actually re-export createMuiTheme
import { createMuiTheme } from '@material-ui/core'
import type { ThemeOptions } from '@material-ui/core'

const MyThemeProvider: FunctionComponent<React.PropsWithChildren<{ myTheme: ThemeOptions }>> = ({ myTheme, children }) => {
  const ayxTheme = useTheme()
  const mergedTheme = createMuiTheme(myTheme, ayxTheme)
  // import theme from '@alteryx/ui/theme'
  // const mergedTheme = createMuiTheme(myTheme, theme({}, '', ''))
  // const mergedTheme = theme({}, '', '')
  return <ThemeProvider theme={mergedTheme}>{children}</ThemeProvider>
}

const Tool: FunctionComponent = () => {
  return (
    <DesignerApi messages={{}} defaultConfig={{}}>
      <AyxAppWrapper>
        <MyThemeProvider myTheme={myTheme}>
          <App />
        </MyThemeProvider>
      </AyxAppWrapper>
    </DesignerApi>
  )
}

Not sure what else to try. I can either get the default Alteryx styles, or I get my styles without any default Alteryx styles.