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

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/
import React from "react";
// nodejs library to set properties for components
// import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import Grid from "@material-ui/core/Grid";
import { createStyles } from "@material-ui/core";
import { WithStyles } from "@material-ui/styles";

const style = createStyles({
  grid: {
    position: "relative",
    width: "100%",
    minHeight: "1px",
    paddingRight: "15px",
    paddingLeft: "15px",
    flexBasis: "auto"
  }
});

interface IGridItemProps extends WithStyles {
  children?: any;
  className?: string;
  xs?: any;
  sm?: any;
  md?: any;

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/
import {
  defaultFont,
  primaryBoxShadow,
  infoBoxShadow,
  successBoxShadow,
  warningBoxShadow,
  dangerBoxShadow,
  container
} from "../../material-kit-react";
import { createStyles } from "@material-ui/core";

const snackbarContentStyle = createStyles({
  root: {
    ...defaultFont,
    position: "relative",
    padding: "20px 15px",
    lineHeight: "20px",
    marginBottom: "20px",
    fontSize: "14px",
    backgroundColor: "white",
    color: "#555555",
    borderRadius: "0px",
    maxWidth: "100%",
    minWidth: "auto",
    boxShadow:
      "0 12px 20px -10px rgba(255, 255, 255, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2)"
  },
  info: {

import {createStyles, StyledComponentProps, withStyles} from "@material-ui/core";
import {Button} from "@material-ui/core/es";
import IconButton from "@material-ui/core/es/IconButton";
import Menu from "@material-ui/core/es/Menu";
import MenuItem from "@material-ui/core/es/MenuItem";
import {MoreVert} from "@material-ui/icons";
import * as React from "react";
import {connect} from "react-redux";
import {deleteGeoInfos, setCurrentlyEdited} from "../../../reducers/map-reducer";
import {RootReducerState} from "../../../reducers/root-reducer";
import {MapPickerModuleType, mapPickerTypeToIconAndText} from "../modules/MapPickerModule";
import {Dialogs, setActiveDialog} from "../../../reducers/dialog-reducer";

const styles = createStyles({
    menuButtonContainer: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    menu: {
        marginLeft: "5px",
        padding: "0px",
    }
});

interface Props extends StyledComponentProps {
    uuid: string;
    className?: string;
    type: MapPickerModuleType;

import { Button, createMuiTheme, createStyles, Grid, Typography, WithStyles, withStyles } from '@material-ui/core';
import * as React from 'react';
import AltinnIcon from '../components/AltinnIcon';
import altinnTheme from '../theme/altinnStudioTheme';

const theme = createMuiTheme(altinnTheme);

const styles = createStyles({
  cloneButton: {
    textTransform: 'none',
    padding: 0,
    '&:hover': {
      backgroundColor: 'transparent !Important',
    },
    '&:focus': {
      backgroundColor: 'transparent !Important',
    },
  },
});

export interface ICloneButtonProps extends WithStyles {
  onClick: (event: React.MouseEvent) => void;
  buttonText: string;
}

* Product Page: https://www.creative-tim.com/product/material-kit-react
* Copyright 2019 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/material-kit-react/blob/master/LICENSE.md)

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/
import { container } from "../../material-kit-react";
import { createStyles } from "@material-ui/core";

const signupPageStyle = createStyles({
  container: {
    ...container,
    zIndex: 2,
    position: "relative",
    paddingTop: "20vh",
    color: "#FFFFFF",
    paddingBottom: "200px"
  },
  cardHidden: {
    opacity: 0,
    transform: "translate3d(0, -60px, 0)"
  },
  pageHeader: {
    minHeight: "100vh",
    height: "auto",
    display: "inherit",

onChangeFunction?: any;
  placeholder?: any;
  textAreaRows?: number;
  inputHeaderStyling?: object;
  inputDescriptionStyling?: object;
  type?: any;
  textFieldId?: string;
  fullWidth?: boolean;
}

export interface IAltinnInputFieldComponentState {
}

const theme = createMuiTheme(altinnTheme);

const styles = createStyles({
  inputHeader: {
    fontSize: '24px',
    fontWeight: 400
  },
  marginTop_10: {
    marginTop: '10px',
  },
  descriptionInput: {
    fontSize: '16px',
    marginTop: '10px',
  },
  inputField: {
    border: '1px solid ' + theme.altinnPalette.primary.blueDark,
    marginTop: '10px',
    background: 'none',
    width: '386px',

import {
  createStyles,
  Grid,
  WithStyles,
  withStyles,
} from '@material-ui/core';
import * as React from 'react';
import { useSelector } from 'react-redux';
import { IRuntimeState } from 'src/types';
import {AltinnInput} from 'altinn-shared/components';
import {AltinnAppTheme} from 'altinn-shared/theme';

const styles = createStyles({
  partySearchContainer: {
    width: '50%',
    border: `2px solid ${AltinnAppTheme.altinnPalette.primary.blue}`,
  },
});

export interface IAltinnPartySearchProps extends WithStyles {
  onSearchUpdated: (searchString: string) => void;
}

function AltinnPartySearch(props: IAltinnPartySearchProps) {
  const language = useSelector((state: IRuntimeState) => state.language.language);

  const [ searchString, setSearchString ] = React.useState('');
  const { classes, onSearchUpdated } = props;

import {createStyles, WithStyles, withStyles} from "@material-ui/core"
import * as d3 from "d3"
import * as React from "react"
import {PlayerStartEnd} from "./PlayerStartEnd"

const styles = createStyles({
    svgWrapper: {
        overflowX: "auto",
        textAlign: "center",
        width: "100%"
    }
})

interface OwnProps {
    playerList: KickoffPlayerElement[]
    players: KickoffPlayers
    onMouseover?: (i: number) => void
    onMouseout?: (i: number) => void
    height: number
    width: number
}

import {isWidthUp, WithWidth} from "@material-ui/core/withWidth"
import Menu from "@material-ui/icons/Menu"
import * as React from "react"
import {connect} from "react-redux"
import {Link} from "react-router-dom"
import {Dispatch} from "redux"
import {ThemeContext} from "../../../Contexts/ThemeContext"
import {GLOBAL_STATS_LINK} from "../../../Globals"
import {LoggedInUserActions, StoreState} from "../../../Redux"
import {getLoggedInUser} from "../../../Requests/Global"
import {Logo} from "../Logo/Logo"
import {Search} from "../Search"
import {UploadDialogWrapper} from "../Upload/UploadDialogWrapper"
import {AccountMenu} from "./AccountMenu"

const styles = createStyles({
    grow: {
        flexGrow: 1
    },
    motto: {
        margin: "auto 0 auto 0"
    },
    search: {
        flexGrow: 1,
        minWidth: 200,
        maxWidth: 400
    },
    accountMenuGridItem: {
        margin: "auto",
        marginLeft: 10
    }
})

import * as React from "react"

import {createStyles, Toolbar, WithStyles, withStyles, withWidth} from "@material-ui/core"
import {isWidthUp, WithWidth} from "@material-ui/core/withWidth"

const styles = createStyles({
    content: {
        display: "flex",
        flexDirection: "column",
        width: "100%",
        flex: 1
    }
})

type Props = WithStyles & WithWidth

class PageContentComponent extends React.PureComponent {
    public render() {
        const {classes} = this.props
        const aboveSm = isWidthUp("sm", this.props.width)
        return (
            <div></div>