How to use the @material-ui/styles/styled function in @material-ui/styles

function testGetThemeProps(theme: Theme, props: AppBarProps): void {
  const overriddenProps: AppBarProps = getThemeProps({ name: 'MuiAppBar', props, theme });

  // AvatarProps not assignable to AppBarProps
  // $ExpectError
  const wronglyNamedProps: AppBarProps = getThemeProps({
    name: 'MuiAvatar',
    props,
    theme,
  });
}

{
  // styled
  const StyledButton = styled('button')({
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  });
  const renderedStyledButton = ;
  // $ExpectError
  const nonExistingClassKey = ;

  interface MyTheme {
    fontFamily: string;
  }

`;

const DownIcon = muiStyled(ArrowDropDown)({
  color: 'white',
  marginLeft: '10px'
});

const MenuHeaderItem = muiStyled(MenuItem)({
  color: '#9b9b9b',
  boxSizing: 'border-box',
  padding: '5px 25px',
  opacity: 1,
  fontSize: '16px'
});

const MainMenuItem = muiStyled(MenuItem)({
  '&[class*="selected"]': {
    backgroundColor: 'rgba(101,  200, 206, 0.13)'
  },
  '&:hover': {
    backgroundColor: 'rgba(101,  200, 206, 0.1)'
  }
});

const UncheckedIcon = muiStyled(RadioButtonUncheckedIcon)({
  fontSize: '18px'
});

const CheckedIcon = muiStyled(RadioButtonCheckedIcon)({
  fontSize: '18px',
  color: '#00c4dc'
});

import CircularProgress from '@material-ui/core/CircularProgress';
import styled from '@material-ui/styles/styled';
export const LoadingIcon = styled(CircularProgress)(({ theme }) => ({
    color: theme.palette.primary.main,
    display: 'block !important',
    margin: 'auto !important',
    marginBottom: '15px !important',
}));

getModalItem,
  getSort,
  getEntities,
  getAggregations
} from '../../reducers/app/selectors';
import { getItemByPrimaryKey, submitQuery } from '../../reducers/app/thunks';
import { setSortAction } from '../../reducers/app/actions';
import CustomTableRow from '../../components/CustomTableRow';
import CustomTableHeader from '../../components/TableHeader';
import CustomPaginator from '../../components/CustomPaginator';
import { Sort, Config, Aggregation } from '../../types';
import { getEntityModalName } from '../../utils/hashtable';

const entityloader = f => import(`../Entities/${f}`);

const TableContainer = muiStyled(Table)({
  width: '100%',
  background: '#fff',
  borderRadius: '4px'
});

const Overflow = styled.div`
  overflow-x: auto;
`;

interface Props {
  rowsPerPage: number;
  items: any[];
  selectedColumns: any[];
  selectedConfig: Config;
  selectedEntity: string;
  selectedModalItem: object;

align-items: center;
  margin-left: auto;
  @media(max-width: 1200px) {
    flex: 1;
  }
`;

const InputContainer = muiStyled(InputBase)({
  flex: 1,
  color: '#ffffff',
  letterSpacing: '0.75px',
  fontSize: '18px',
  fontWeight: 'bold'
});

const RevertSearchIcon = muiStyled(SearchIcon)({
  color: '#ffffff',
  transform: 'rotateY(180deg)',
  fontSize: 35
});

interface Props {
  selectedConfig: Config;
  configs: Config[];
  onChangeNetwork(config: Config): void;
  openModal(): void;
  onRemoveConfig(index: number): void;
  onSearch(val: string | number): void;
}

const Header: React.FC = props => {
  const { selectedConfig, configs, onSearch } = props;

});

const MainMenuItem = muiStyled(MenuItem)({
  '&[class*="selected"]': {
    backgroundColor: 'rgba(101,  200, 206, 0.13)'
  },
  '&:hover': {
    backgroundColor: 'rgba(101,  200, 206, 0.1)'
  }
});

const UncheckedIcon = muiStyled(RadioButtonUncheckedIcon)({
  fontSize: '18px'
});

const CheckedIcon = muiStyled(RadioButtonCheckedIcon)({
  fontSize: '18px',
  color: '#00c4dc'
});

const MenuBtn = muiStyled(Button)({
  height: '52px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  fontSize: '24px',
  fontWeight: 300,
  letterSpacing: '2.57px',
  cursor: 'pointer',
  color: '#fffffe',
  textTransform: 'capitalize'
});

import 'rc-tooltip/assets/bootstrap_white.css';

const Container = styled.div`
  position: absolute;
  right: 30px;
  top: 225px;
  height: 52px;
  display: flex;
  align-items: center;
`;

const SelectContainer = muiStyled(FormControl)({
  marginLeft: '12px'
});

const SelectWrapper = muiStyled(SelectField)({
  fontSize: '16px',
  fontWeight: 400,
  letterSpacing: '1.95px',
  color: '#56c2d9',
  '&:before': {
    borderBottom: 0,
  },
  '&:after': {
    borderBottom: 0,
  },
  '&:hover:before': {
    borderBottom: '0 !important',
  }
});

const DownIcon = styled(ArronaxIcon)`

import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import Tooltip from 'rc-tooltip';
import { ArronaxIcon } from '../ArronaxIcon';
import 'rc-tooltip/assets/bootstrap_white.css';

const Container = styled.div`
  position: absolute;
  right: 30px;
  top: 225px;
  height: 52px;
  display: flex;
  align-items: center;
`;

const SelectContainer = muiStyled(FormControl)({
  marginLeft: '12px'
});

const SelectWrapper = muiStyled(SelectField)({
  fontSize: '16px',
  fontWeight: 400,
  letterSpacing: '1.95px',
  color: '#56c2d9',
  '&:before': {
    borderBottom: 0,
  },
  '&:after': {
    borderBottom: 0,
  },
  '&:hover:before': {
    borderBottom: '0 !important',

import React from 'react';
import { useTranslation } from 'react-i18next';
import muiStyled from '@material-ui/styles/styled';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import Tooltip from '@material-ui/core/Tooltip';
import { Aggregation } from '../../types';

const TableCellWrapper = muiStyled(TableCell)({
  color: '#4a4a4a',
  fontSize: '16px',
  fontWeight: 400,
  letterSpacing: '1.95px',
  border: 'none'
});

const SortLabelWrapper = muiStyled(TableSortLabel)({
  textTransform: 'capitalize'
});

interface Props {
  order: 'asc' | 'desc';
  orderBy: string;
  rows: any[];
  aggregations: Aggregation[];

sizing,
} from '@material-ui/system';

export const styleFunction = compose(
  display,
  sizing,
  spacing,
  typography,
  palette,
  positions,
  lineHeight,
  letterSpacing,
  cssSystem,
);

const Text = styled(Typography)(styleFunction);

Text.brand = {
  color: 'primary.main',
  fontSize: 28,
  fontFamily: 'Covered By Your Grace',
};
Text.displayName = 'Text';

export default Text;