title: How do I import a Mobx state tree and reference its values in a Typescript file without a component?
body: <p>I want to use values in a MST in a vanilla typescript document. It doesn't have a component, just an object of css values that is referenced in the style tags of elements in other components. Is this possible? If so, how would I go about doing it?</p>
  
  <p>edit: Here's some code</p>
  
  <p><strong>Mobx State Tree</strong></p>
  
  <pre><code>import { types } from 'mobx-state-tree'
  
  export const BotCSS = types.model({
    chatBackground: types.optional(types.string, '#fff'),
    fontType: types.optional(types.string, 'Open Sans'),
    hoverFillColor: types.optional(types.string, '#306aca'),
    hoverFontColor: types.optional(types.string, '#f2f2f2'),
    primaryColor: types.optional(types.string, '#427ee1'),
    secondaryColor: types.optional(types.string, '#f2f2f2'),
    typingAnimationDots: types.optional(types.string, '#427ee1'),
    typingAnimationFill: types.optional(types.string, '#f2f2f2'),
    userResponseColor: types.optional(types.string, '#427ee1')
  })
  
  export type IBotCSS = typeof BotCSS.Type
  </code></pre>
  
  <p><strong>theme.ts document with theme obj - I want to set mobx values equal to some of these variables</strong></p>
  
  <pre><code>const userMessageBackgroud = `${blue}`
  const userMessageBorder = `${blue}`
  const userMessageColor = `${white}`
  
  const minimizeboxBackgroud = `${blue}`
  const minimizeboxColor = `${white}`
  
  export const theme = {
    AgentBar: {
      Avatar: {
        size: '42px'
      },
      css: {
        backgroundColor: `${secondaryColor}`,
        borderColor: `${avatarBorderColor}`
      }
    },
    AvatarImg: {
      backgroundColor: 'transparent',
      border: 'none',
      borderRadius: 0,
      height: '38px',
      width: '40px'
    }, (...etc)
  </code></pre>
  
  <p>So essentially there are a number of variables at the top of this theme.ts document that are used in the theme object. I want to set the values in mobx equal to the variable declarations at the top of the document</p>