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

The following examples show how to use @material-ui/core/styles#WithStyles. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Panel.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
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;
  }
}
Example #2
Source File: index.tsx    From Demae with MIT License 6 votes vote down vote up
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)
Example #3
Source File: LoadMoreButton.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
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>
    );
  }
}
Example #4
Source File: index.tsx    From synapse-extension with MIT License 6 votes vote down vote up
BootstrapButton = withStyles({
  root: {
    width: 208,
    boxShadow: 'none',
    fontSize: 16,
    padding: '8px 12px',
    border: '1px solid',
    backgroundColor: '#0063cc',
    borderColor: '#0063cc',
  },
})(Button)
Example #5
Source File: ColorlibConnector.tsx    From deskreen with GNU Affero General Public License v3.0 6 votes vote down vote up
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)
Example #6
Source File: About.tsx    From isitworththecost with MIT License 6 votes vote down vote up
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>
    )
})
Example #7
Source File: ServerListItemSingle.tsx    From shadowsocks-electron with GNU General Public License v3.0 6 votes vote down vote up
StyledBadge = withStyles((theme: Theme) =>
  createStyles({
    badge: {
      right: -20,
      top: 12,
      borderRadius: 3,
      padding: '0 5',
      border: `solid 1px #8f8f8f`,
      backgroundColor: 'inherit',
      color: '#8f8f8f'
    },
  }),
)(Badge)
Example #8
Source File: VisitorListAside.tsx    From ra-enterprise-demo with MIT License 6 votes vote down vote up
Card = withStyles(theme => ({
    root: {
        flexShrink: 0,
        [theme.breakpoints.up('sm')]: {
            order: -1,
            width: '15em',
            marginRight: '1em',
        },
        [theme.breakpoints.down('sm')]: {
            display: 'none',
        },
    },
}))(MuiCard)
Example #9
Source File: HelpButton.tsx    From kfp-tekton-backend with Apache License 2.0 6 votes vote down vote up
NostyleTooltip = withStyles({
  tooltip: {
    backgroundColor: 'transparent',
    border: '0 none',
    color: color.secondaryText,
    fontSize: fontsize.base,
    maxWidth: 220,
  },
})(Tooltip)
Example #10
Source File: App.tsx    From AIPerf with MIT License 6 votes vote down vote up
ExpansionPanelSummary = withStyles({
  root: {},
  content: {
    '&$expanded': {
      margin: '12px 0',
    },
  },
  expanded: {},
})(MuiExpansionPanelSummary)
Example #11
Source File: SideBarItem.tsx    From bee-dashboard with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up
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)
Example #12
Source File: InfoCard.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
CardActionsTopRight = withStyles(
  theme => ({
    root: {
      display: 'inline-block',
      padding: theme.spacing(8, 8, 0, 0),
      float: 'right',
    },
  }),
  { name: 'BackstageInfoCardCardActionsTopRight' },
)(CardActions)
Example #13
Source File: LegalModal.tsx    From covid19testing-map with GNU General Public License v3.0 6 votes vote down vote up
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>
  );
})
Example #14
Source File: PricingPage.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
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>
  );
})
Example #15
Source File: Breadcrumbs.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
ClickableText = withStyles(
  {
    root: {
      textDecoration: 'underline',
      cursor: 'pointer',
    },
  },
  { name: 'BackstageBreadcrumbsClickableText' },
)(Typography)
Example #16
Source File: QueueBreadcrumb.tsx    From asynqmon with MIT License 6 votes vote down vote up
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
Example #17
Source File: Select.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
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)
Example #18
Source File: dialog.tsx    From jupyter-extensions with Apache License 2.0 6 votes vote down vote up
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} />;
})
Example #19
Source File: CustomDialogTitle.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
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>
    );
  },
)
Example #20
Source File: menus.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up
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>
    );
  }
}
Example #21
Source File: PullRequestCardPolicy.tsx    From backstage with Apache License 2.0 5 votes vote down vote up
PolicyRequiredIcon = withStyles(
  theme => ({
    root: {
      color: theme.palette.info.main,
    },
  }),
  { name: 'PolicyRequiredIcon' },
)(WatchLaterIcon)
Example #22
Source File: Hr.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up
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>
      );
    }
  }
}
Example #23
Source File: MetadataTable.tsx    From backstage with Apache License 2.0 5 votes vote down vote up
MetadataListItem = withStyles(listItemStyles, {
  name: 'BackstageMetadataTableListItem',
})(({ classes, children }: StyleProps) => (
  <li className={classes.root}>{children}</li>
))
Example #24
Source File: RichEditorInternal.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up
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 || {},
        }}
      />
    );
  }
}
Example #25
Source File: MetadataTable.tsx    From backstage with Apache License 2.0 5 votes vote down vote up
ContentCell = withStyles(tableContentCellStyles, {
  name: 'BackstageMetadataTableCell',
})(TableCell)
Example #26
Source File: Stack.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up
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>
    );
  }
}
Example #27
Source File: LoginForm.tsx    From react-tutorials with MIT License 5 votes vote down vote up
LoginForm = withStyles(styles)(LoginFormInner)
Example #28
Source File: AnimBubble.tsx    From clearflask with Apache License 2.0 5 votes vote down vote up
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>
    );
  }
}
Example #29
Source File: Centered.tsx    From react-tutorials with MIT License 5 votes vote down vote up
Centered = withStyles(styles)(CenteredViewInner)