@material-ui/core/styles#WithStyles TypeScript Examples

class Panel extends Component<Props & WithStyles<typeof styles, true>> {
  render() {
    var content = (
      <div
        className={classNames(!this.props.title && this.props.className, this.props.classes.container, this.props.classes[this.props.direction])}
        style={{ maxHeight: this.props.maxHeight }}
      >
        {this.props.children}
      </div>
    );

    if (this.props.title) {
      content = (
        <DividerCorner
          suppressDivider
          className={this.props.className}
          title={this.props.title}
        >
          {content}
        </DividerCorner>
      );
    } else {
      content = (
        <div className={this.props.direction === Direction.Horizontal
          ? this.props.classes.cornerlessHorizontal : this.props.classes.cornerlessVertical}>
          {content}
        </div>
      );
    }

    return content;
  }
}

QontoConnector = withStyles({
	alternativeLabel: {
		top: 10,
		left: "calc(-50% + 16px)",
		right: "calc(50% + 16px)",
	},
	active: {
		"& $line": {
			borderColor: "#784af4",
		},
	},
	completed: {
		"& $line": {
			borderColor: "#784af4",
		},
	},
	line: {
		borderColor: "#eaeaf0",
		borderTopWidth: 3,
		borderRadius: 1,
	},
})(StepConnector)

class LoadMoreButton extends Component<Props & WithStyles<typeof styles, true>> {
  render() {
    return (
      <div className={this.props.classes.container}>
        <IconButton
          className={this.props.classes.loadMore}
          onClick={this.props.onClick.bind(this)}
        >
          <MoreIcon />
        </IconButton>
      </div>
    );
  }
}

BootstrapButton = withStyles({
  root: {
    width: 208,
    boxShadow: 'none',
    fontSize: 16,
    padding: '8px 12px',
    border: '1px solid',
    backgroundColor: '#0063cc',
    borderColor: '#0063cc',
  },
})(Button)

ColorlibConnector = withStyles({
  alternativeLabel: {
    top: 43,
  },
  active: {
    '& $line': {
      backgroundImage:
        'linear-gradient( 95deg, #3DCC91 0%, #15B371 50%, #FFB366 100%)',
    },
  },
  completed: {
    '& $line': {
      backgroundImage:
        'linear-gradient( 95deg, #3DCC91 0%, #15B371 50%, #3DCC91 100%)',
    },
  },
  line: {
    height: 2,
    border: 0,
    backgroundColor: '#CED9E0',
    borderRadius: 1,
  },
})(StepConnector)

DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
    const { children, classes, onClose, ...other } = props
    return (
        <MuiDialogTitle disableTypography className={classes.root} {...other}>
            <Typography variant="h6">{children}</Typography>
            {onClose ? (
                <IconButton
                    aria-label="close"
                    className={classes.closeButton}
                    onClick={onClose}
                >
                    <CloseIcon />
                </IconButton>
            ) : null}
        </MuiDialogTitle>
    )
})

StyledBadge = withStyles((theme: Theme) =>
  createStyles({
    badge: {
      right: -20,
      top: 12,
      borderRadius: 3,
      padding: '0 5',
      border: `solid 1px #8f8f8f`,
      backgroundColor: 'inherit',
      color: '#8f8f8f'
    },
  }),
)(Badge)

Card = withStyles(theme => ({
    root: {
        flexShrink: 0,
        [theme.breakpoints.up('sm')]: {
            order: -1,
            width: '15em',
            marginRight: '1em',
        },
        [theme.breakpoints.down('sm')]: {
            display: 'none',
        },
    },
}))(MuiCard)

NostyleTooltip = withStyles({
  tooltip: {
    backgroundColor: 'transparent',
    border: '0 none',
    color: color.secondaryText,
    fontSize: fontsize.base,
    maxWidth: 220,
  },
})(Tooltip)

ExpansionPanelSummary = withStyles({
  root: {},
  content: {
    '&$expanded': {
      margin: '12px 0',
    },
  },
  expanded: {},
})(MuiExpansionPanelSummary)

StyledListItem = withStyles((theme: Theme) => ({
  root: {
    paddingLeft: theme.spacing(4),
    paddingRight: theme.spacing(4),
    borderLeft: '4px solid rgba(0,0,0,0)',
    '&.Mui-selected, &.Mui-selected:hover': {
      borderLeft: `4px solid ${theme.palette.primary.main}`,
      backgroundColor: '#2c2c2c',
      color: '#f9f9f9',
    },
  },
  button: {
    '&:hover': {
      backgroundColor: '#2c2c2c',
      color: '#f9f9f9',

      // https://github.com/mui-org/material-ui/issues/22543
      '@media (hover: none)': {
        backgroundColor: '#2c2c2c',
        color: '#f9f9f9',
      },
    },
  },
}))(ListItem)

CardActionsTopRight = withStyles(
  theme => ({
    root: {
      display: 'inline-block',
      padding: theme.spacing(8, 8, 0, 0),
      float: 'right',
    },
  }),
  { name: 'BackstageInfoCardCardActionsTopRight' },
)(CardActions)

DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
  const { children, classes, onClose, ...other } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton
          aria-label="close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
})

FeatureList = withStyles(styles, { withTheme: true })((props: WithStyles<typeof styles, true> & {
  planNames: string[],
  name: string,
  children?: any,
}) => {
  const theme = useTheme();
  const mdUp = useMediaQuery(theme.breakpoints.up('sm'));
  return (
    <div className={props.classes.box}>
      <Table
        size={mdUp ? 'medium' : 'small'}
      >
        <TableHead>
          <TableRow>
            <TableCell key='feature'><Typography variant='h6'>{props.name}</Typography></TableCell>
            {props.planNames.map(planName => (
              <TableCell key={planName}>{planName}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {props.children}
        </TableBody>
      </Table>
    </div>
  );
})

ClickableText = withStyles(
  {
    root: {
      textDecoration: 'underline',
      cursor: 'pointer',
    },
  },
  { name: 'BackstageBreadcrumbsClickableText' },
)(Typography)

StyledBreadcrumb = withStyles((theme: Theme) => ({
  root: {
    backgroundColor: isDarkTheme(theme)
      ? "#303030"
      : theme.palette.background.default,
    height: theme.spacing(3),
    color: theme.palette.text.secondary,
    fontWeight: 400,
    "&:hover, &:focus": {
      backgroundColor: theme.palette.action.hover,
    },
    "&:active": {
      boxShadow: theme.shadows[1],
      backgroundColor: emphasize(theme.palette.action.hover, 0.12),
    },
  },
}))(Chip) as typeof Chip

BootstrapInput = withStyles(
  (theme: Theme) =>
    createStyles({
      root: {
        'label + &': {
          marginTop: theme.spacing(3),
        },
      },
      input: {
        borderRadius: 4,
        position: 'relative',
        backgroundColor: theme.palette.background.paper,
        border: '1px solid #ced4da',
        fontSize: 16,
        padding: '10px 26px 10px 12px',
        transition: theme.transitions.create(['border-color', 'box-shadow']),
        fontFamily: 'Helvetica Neue',
        '&:focus': {
          background: theme.palette.background.paper,
          borderRadius: 4,
        },
      },
    }),
  { name: 'BackstageSelectInputBase' },
)(InputBase)

StyledDialog = withStyles({
  paper: {
    minHeight: (props: StyledDialogProps) => props.height ?? 0,
    backgroundColor: 'var(--jp-layout-color1)',
    color: 'var(--jp-ui-font-color1)',
  },
})((props: StyledDialogProps) => {
  return <Dialog {...props} />;
})

CustomDialogTitle = withStyles(styles)(
  (props: DialogTitleProps) => {
    const { children, classes, onClose, ...other } = props;
    return (
      <MuiDialogTitle disableTypography className={classes.root} {...other}>
        <Typography variant="h6">{children}</Typography>
        {onClose ? (
          <IconButton
            aria-label="close"
            className={classes.closeButton}
            onClick={onClose}
          >
            <CloseIcon />
          </IconButton>
        ) : null}
      </MuiDialogTitle>
    );
  },
)

class MenuDropdownButtonRaw extends React.Component<MenuDropdownButtonProps & WithStyles<typeof styles, true>, MenuDropdownButtonState> {
  state: MenuDropdownButtonState = {};
  lastEventId = 0;

  render() {
    const onMouseOverButton = () => {
      this.setState({ hover: true });
      const lastEventId = ++this.lastEventId;
      setTimeout(() => lastEventId === this.lastEventId
        && this.state.hover
        && this.setState({ open: true }), 1);
    };
    const onMouseOverPopper = () => {
      ++this.lastEventId; // Cancel any events including mouse out
    };
    const onMouseOut = () => {
      this.setState({ hover: false });
      const lastEventId = ++this.lastEventId;
      setTimeout(() => lastEventId === this.lastEventId
        && !this.state.hover
        && this.setState({ open: false }), 1);
    };
    return (
      <div className={this.props.classes.dropdownContainer}>
        <Button
          size='large'
          className={classNames(this.props.classes.button, this.props.isOuter && this.props.classes.buttonOuter)}
          color={this.props.color}
          onClick={() => {
            ++this.lastEventId;
            this.setState({ open: true })
          }}
          onMouseOver={onMouseOverButton}
          onMouseOut={onMouseOut}
        >
          {this.props.dropdown.title}
        </Button>
        <ClosablePopper
          anchorType='in-place'
          paperClassName={this.props.classes.menuPopperPaper}
          className={this.props.classes.menuPopper}
          clickAway
          closeButtonPosition='disable'
          open={!!this.state.open}
          onClose={() => {
            ++this.lastEventId;
            if (!this.state.open) this.setState({ open: false });
          }}
          onMouseOver={onMouseOverPopper}
          onMouseOut={onMouseOut}
          transitionCmpt={Grow}
          transitionProps={{
            style: { transformOrigin: '50% 0 0' },
            timeout: this.props.theme.transitions.duration.shortest,
          }}
          placement='bottom'
          modifiers={{
            // preventOverflow: { enabled: false },
            flip: { enabled: false },
          }}
        >
          <MenuItems
            items={this.props.dropdown.items}
            onClick={() => {
              ++this.lastEventId;
              this.setState({ open: false })
            }}
            insideDropdown
          />
        </ClosablePopper>
      </div>
    );
  }
}

PolicyRequiredIcon = withStyles(
  theme => ({
    root: {
      color: theme.palette.info.main,
    },
  }),
  { name: 'PolicyRequiredIcon' },
)(WatchLaterIcon)

class Hr extends React.Component<Props & WithStyles<typeof styles, true>> {

  render() {
    if (this.props.vertical) {
      return (
        <div className={`${this.props.classes.vrContainer} ${this.props.className}`}>
          <div className={this.props.classes.vr} style={{
            ...(this.props.length && {
              height: this.props.length
            }),
            ...(this.props.margins && {
              marginLeft: this.props.margins,
              marginRight: this.props.margins,
            }),
            ...this.props.style,
          }}>
            {this.props.children ? (
              <span className={this.props.classes.vrChildren}>
                {this.props.children}
              </span>
            ) : ' '}
          </div>
        </div>
      );
    } else {
      return (
        <div className={`${this.props.classes.hr} ${this.props.className}`}
          style={{
            ...(this.props.length && {
              width: this.props.length
            }),
            ...(this.props.margins && {
              marginTop: this.props.margins,
              marginBottom: this.props.margins,
            }),
            ...this.props.style,
          }}
        >
          {this.props.children && (
            <span className={this.props.classes.hrChildren}>
              {this.props.children}
            </span>
          )}
        </div>
      );
    }
  }
}

MetadataListItem = withStyles(listItemStyles, {
  name: 'BackstageMetadataTableListItem',
})(({ classes, children }: StyleProps) => (
  <li className={classes.root}>{children}</li>
))

class RichEditorInternal extends React.Component<PropsRichEditor & Omit<React.ComponentProps<typeof TextField>, 'onChange' | 'inputRef'> & WithStyles<typeof styles, true> & WithSnackbarProps, StateRichEditor> {
  constructor(props) {
    super(props);

    this.state = {
      hasText: (props.defaultValue !== undefined && props.defaultValue !== '')
        || (props.value !== undefined && props.value !== ''),
    };
  }

  render() {
    const { onChange, theme, enqueueSnackbar, closeSnackbar, classes, iAgreeInputIsSanitized, component, ...TextFieldProps } = this.props;

    /**
     * To add single-line support visit https://github.com/quilljs/quill/issues/1432
     * Be careful, when adding keyboard module, handlers somehow stop working.
     */
    if (!TextFieldProps.multiline) {
      throw new Error('RichEditor only supports multiline');
    }

    const shrink = this.state.hasText || this.state.isFocused || false;
    const TextFieldCmpt = component || TextField;
    return (
      <TextFieldCmpt
        className={this.props.classes.textField}
        {...TextFieldProps as any /** Weird issue with variant */}
        InputProps={{
          ...this.props.InputProps || {},
          inputComponent: RichEditorInputRefWrap,
          inputProps: {
            // Anything here will be passed along to RichEditorQuill below
            ...this.props.InputProps?.inputProps || {},
            autoFocusAndSelect: this.props.autoFocusAndSelect,
            uploadImage: this.props.uploadImage,
            classes: this.props.classes,
            theme: theme,
            hidePlaceholder: !shrink && !!this.props.label,
            showControlsImmediately: this.props.showControlsImmediately,
            enqueueSnackbar: enqueueSnackbar,
            closeSnackbar: closeSnackbar,
            onFocus: e => {
              this.setState({ isFocused: true });
              this.props.InputProps?.onFocus?.(e);
            },
            onBlur: e => {
              this.setState({ isFocused: false });
              this.props.InputProps?.onBlur?.(e);
            },
          },
        }}
        onChange={(e) => {
          // Unpack these from the event defined in PropsQuill
          const delta = e.target['delta'];
          const source = e.target['source'];
          const editor = e.target['editor'];

          const hasText = editor.getLength() > 0 ? true : undefined;
          this.props.onChange && this.props.onChange(e, delta, source, editor);
          if (!!this.state.hasText !== !!hasText) {
            this.setState({ hasText });
          }
        }}
        InputLabelProps={{
          shrink,
          ...this.props.InputLabelProps || {},
        }}
      />
    );
  }
}

ContentCell = withStyles(tableContentCellStyles, {
  name: 'BackstageMetadataTableCell',
})(TableCell)

class Stack extends Component<Props & WithStyles<typeof styles, true> & WithWidthProps, State> {
  state: State = {};

  render() {
    const count = this.props.items.length;
    var overlap = true;
    var spacing = 100;
    switch (this.props.width) {
      case "xs":
        overlap = false;
        break;
      case "sm":
        spacing = 150
        break;
      case "md":
        spacing = 50
        break;
      default:
        break;
    }
    var spacingHor = this.props.contentSpacingHorizontal || spacing;
    var spacingVer = this.props.contentSpacingVertical || spacing;

    var marginTopBottom = overlap ? spacingVer * ((count - 1) / 2) : 0;
    var marginLeftRight = overlap ? spacingHor * ((count - 1) / 2) : 0;

    return (
      <div className={this.props.classes.container} style={{
        marginTop: marginTopBottom,
        marginBottom: marginTopBottom,
        marginLeft: marginLeftRight,
        marginRight: marginLeftRight,
        height: overlap ? 300 : undefined,
        float: this.props.float,
      }}>
        {this.props.items.map((item, contentNumber) => (
          <Paper
            key={contentNumber}
            className={this.props.classes.content}
            onMouseOver={this.props.raiseOnHover && this.state.hoveringContent !== contentNumber ? () => this.setState({ hoveringContent: contentNumber }) : undefined}
            style={{
              height: item.height || 300,
              width: item.width,
              marginBottom: overlap ? 0 : 40,
              position: overlap ? 'absolute' : 'static',
              left: overlap ? spacingHor * ((count - 1) / 2 - contentNumber) : 0,
              top: overlap ? -spacingVer * ((count - 1) / 2 - contentNumber) * (this.props.topLeftToBottomRight ? -1 : 1) : 0,
              zIndex: this.state.hoveringContent === contentNumber ? 900 : 800 + contentNumber * (this.props.ascendingLevel ? -1 : 1),
            }}
          >
            {item.content}
          </Paper>
        ))}
      </div>
    );
  }
}

LoginForm = withStyles(styles)(LoginFormInner)

class BubbleAnim extends Component<Props & WithStyles<typeof styles, true>> {
  init: boolean = true;
  task: NodeJS.Timeout | undefined = undefined;

  componentDidMount() {
    if (!windowIso.isSsr && this.init) {
      this.init = false;
      this.task = setTimeout(() => this.forceUpdate(), 1);
    }
  }

  componentWillUnmount() {
    this.task && clearTimeout(this.task);
  }

  render() {
    const color = this.props.color || this.props.theme.palette.secondary.main;
    const size = this.init
      ? '0px'
      : (typeof this.props.size === 'number'
        ? `${this.props.size}px`
        : this.props.size);
    const x = typeof this.props.x === 'number'
      ? `${this.props.x}px`
      : this.props.x
    const y = typeof this.props.y === 'number'
      ? `${this.props.y}px`
      : this.props.y
    const timingFunction = this.props.timingFunction || 'cubic-bezier(0.2, 1.08, 1, 0.99)';
    const duration = this.props.duration || '1s';
    return (
      <div
        className={this.props.classes.bubble}
        style={{
          width: size,
          height: size,
          top: `calc(${y || '0px'} - ${size} / 2)`,
          left: `calc(${x || '0px'} - ${size} / 2)`,
          backgroundImage: this.props.background || `radial-gradient(circle, ${color} 50%, ${color} 100%)`,
          transition: `width ${duration} ${timingFunction},`
            + `height ${duration} ${timingFunction},`
            + `top ${duration} ${timingFunction},`
            + `left ${duration} ${timingFunction}`,
          transitionDelay: this.props.delay || '0s',
        }}
      >&nbsp;</div>
    );
  }
}

Centered = withStyles(styles)(CenteredViewInner)