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

To help you get started, we’ve selected a few @material-ui/styles examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mui-org / material-ui / packages / material-ui / src / styles / createStyles.js View on Github external
export default function createStyles(styles) {
  // warning(
  //   warnOnce,
  //   [
  //     'Material-UI: createStyles from @material-ui/core/styles is deprecated.',
  //     'Please use @material-ui/styles/createStyles',
  //   ].join('\n'),
  // );
  // warnOnce = true;
  return createStylesOriginal(styles);
}
github mui-org / material-ui-pickers / lib / src / _shared / ToolbarButton.tsx View on Github external
);
};

(ToolbarButton as any).propTypes = {
  selected: PropTypes.bool.isRequired,
  label: PropTypes.string.isRequired,
  classes: PropTypes.any.isRequired,
  className: PropTypes.string,
  innerRef: PropTypes.any,
};

ToolbarButton.defaultProps = {
  className: '',
};

export const styles = createStyles({
  toolbarBtn: {
    padding: 0,
    minWidth: '16px',
    textTransform: 'none',
  },
});

export default withStyles(styles, { name: 'MuiPickersToolbarButton' })(ToolbarButton);
github mui-org / material-ui-pickers / docs / pages / demo / datepicker / CustomDay.example.jsx View on Github external
render() {
    const { selectedDate } = this.state;

    return (
      
    );
  }
}

const styles = createStyles(theme => ({
  dayWrapper: {
    position: 'relative',
  },
  day: {
    width: 36,
    height: 36,
    fontSize: theme.typography.caption.fontSize,
    margin: '0 2px',
    color: 'inherit',
  },
  customDayHighlight: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: '2px',
    right: '2px',
github ETCDEVTeam / emerald-wallet / packages / ui / src / components / common / CoinIcon / CoinAvatar.tsx View on Github external
import { Avatar } from '@material-ui/core';
import { createStyles, makeStyles } from '@material-ui/styles';
import * as React from 'react';
import CoinIcon from './CoinIcon';

const colors = {
  eth: '#627eea',
  etc: '#00c957'
};

const useStyles = makeStyles(
  createStyles({
    eth: {
      backgroundColor: colors.eth
    },
    etc: {
      backgroundColor: colors.etc
    }
  })
);

interface ICoinAvatarProps {
  chain: string;
}

const CoinAvatar = (props: ICoinAvatarProps) => {
  const {
    chain
github mui-org / material-ui-pickers / lib / src / _shared / ModalDialog.tsx View on Github external
{okLabel && (
        <button color="primary">
          {okLabel}
        </button>
      )}
    
  
);

ModalDialog.displayName = 'ModalDialog';

const dialogHeight = 405;
const dialogHeightWithTabs = 455;

export const styles = createStyles({
  dialogRoot: {
    minWidth: DIALOG_WIDTH,
    minHeight: dialogHeight,
  },
  dialogRootWider: {
    minWidth: DIALOG_WIDTH_WIDER,
  },
  dialog: {
    minHeight: dialogHeight,
    overflow: 'hidden',

    '&amp;:first-child': {
      padding: 0,
    },
  },
  dialogWithTabs: {