How to use the @material-ui/core.createMuiTheme function in @material-ui/core

import ProcessDispatcher from '../../../shared/resources/process/processDispatcher';
import { IAltinnWindow, IRuntimeState } from '../../../types';
import { get } from '../../../utils/networking';
import { getValidationUrl } from '../../../utils/urlHelper';
import FormValidationActions from '../../form/validation/validationActions';
import { mapDataElementValidationToRedux } from '../../../utils/validation';
import InstanceDataActions from '../../../shared/resources/instanceData/instanceDataActions';
import OrgsActions from '../../../shared/resources/orgs/orgsActions';
import { IApplicationMetadata } from '../../../shared/resources/applicationMetadata';
import { getTextFromAppOrDefault } from '../../../utils/textResource';
// eslint-disable-next-line import/order
import moment = require('moment');

export interface IConfirmProps extends RouteChildrenProps {}

const theme = createMuiTheme(AltinnAppTheme);

const useStyles = makeStyles({
  button: {
    color: theme.altinnPalette.primary.black,
    background: theme.altinnPalette.primary.blue,
    textTransform: 'none' as 'none',
    fontWeight: 400,
    height: 36,
    borderRadius: '0',
    '&:hover': {
      background: theme.altinnPalette.primary.blueDarker,
      color: theme.altinnPalette.primary.white,
    },
    '&:focus': {
      background: theme.altinnPalette.primary.blueDarker,
      color: theme.altinnPalette.primary.white,

},
    table: {
      minWidth: 1316, // TODO: Adjust accordingly once full screen width logic is implemented
      headerHeight: tableHeaderHeight,
    },
    navHeight: {
      value: navHeight,
      px: px(navHeight),
    },
    footerHeight,
  },
  border: `solid 1px ${borderColor}`,
  borderRadius: px(borderRadius),
};

const bodhiTheme = createMuiTheme(theme);

bodhiTheme.typography = {
  ...bodhiTheme.typography,
  // large headline (i.e. title on prediction title)
  subtitle1: {
    fontSize: fontSizeSubtitle1,
    fontWeight: fontWeightBold,
    lineHeight: lineHeightSm,
    marginLeft: '0',
    color: textColorDarkGrey,
    [bodhiTheme.breakpoints.down('xs')]: {
      fontSize: fontSizeBody1,
      fontWeight: fontWeightBold,
      lineHeight: lineHeight32,
    },
  },

checked: boolean;
  /** If the component should be disabeld */
  disabled?: boolean;
  /** Check box component ID */
  id?: any;
  /** Called when onChange is triggered */
  onChangeFunction?: any;
  /** Called when onKeyPress is triggered */
  onKeyPressFunction?: any;
   /** @ignore */
  classes: any;
}

export interface IAltinnCheckBoxComponentState { }

const theme = createMuiTheme(altinnTheme);

const styles = () => createStyles({
  altinnCheckBox: {
    'color': theme.altinnPalette.primary.blueDark + ' !important',
    '& span': {
      '& svg': {
        fontSize: '2.5rem',
      },
    },
  },
});

export const AltinnCheckBox = (props: IAltinnCheckBoxComponentProvidedProps) => {
  const { classes } = props;
  return (

import { createMuiTheme, PaletteType } from "@material-ui/core";
import { blue } from "@material-ui/core/colors";

export const primaryBackgroud = blue[50];
export const primaryColor = "#36A7FC";

let themeRaw = createMuiTheme({
  typography: {
    fontFamily: "Lato, Roboto, Helvetica, Arial, sans-serif",
  },
});

const lightTheme = createMuiTheme({
  overrides: {
    MuiPaper: {
      rounded: {
        borderRadius: "10px",
      },
    },
    MuiExpansionPanel: {
      rounded: {
        borderRadius: "10px",
        "&:first-child": {
          borderTopLeftRadius: "10px",
          borderTopRightRadius: "10px",
        },
        "&:last-child": {
          borderBottomLeftRadius: "10px",
          borderBottomRightRadius: "10px",

import { createMuiTheme } from '@material-ui/core';

import palette from './palette';
import typography from './typography';
import overrides from './overrides';

const theme = createMuiTheme({
  palette,
  typography,
  overrides
});

export default theme;

import React from 'react';
import { ThemeProvider } from '@material-ui/styles';
import { CssBaseline, createMuiTheme } from '@material-ui/core';
import blue from '@material-ui/core/colors/blue';
import orange from '@material-ui/core/colors/orange';
import { Provider } from 'react-redux';
import store from './src/store/store';
import 'react-vis/dist/style.css'


const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: orange,
    type: 'light'
  }
})

export const wrapRootElement = ({ element }) => (
  
    
    
      { element }
    
  
)

import altinnTheme from '../theme/altinnStudioTheme';

export interface IAltinnIconCompontentProvidedProps {
  iconClass: string;
  isActive?: boolean;
  isActiveIconColor?: string;
  iconColor: any;
  iconSize?: number|string;
  padding?: string;
  margin?: string;
  weight?: number;
}

export interface IAltinnIconComponentState {
}
const theme = createMuiTheme(altinnTheme);

const styles = {
  activeIcon: {
    color: theme.altinnPalette.primary.blueDark,
  },
};

export class AltinnIcon extends React.Component {
  public render() {
    return (

<button disabled="{resetButtonDisabled}">
        Reset
      </button>

      <pre>        <small>
          Fields = 
        </small>
      </pre>
    
  );
}

const App = withStyles(styles)(Form);

const noTheme = createMuiTheme();

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark'
  }
});

function AppWithTheme() {
  const [withTheme, setWithTheme] = useState(false);

  function handleChange(_e: React.ChangeEvent, checked: boolean) {
    setWithTheme(checked);
  }

  function renderWithThemeSwitch() {
    return (

import * as React from 'react';
import './App.css';
import AppNavBar from './navigation/App.Bar';
import { BrowserRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './store/Store';
import blue from '@material-ui/core/colors/blue';
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
import { pink } from '@material-ui/core/colors';

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: pink
  }
})
class App extends React.Component {
  public render() {
    return (
      
        
          
            
          
        
      
    );