@material-ui/core#WithStyles TypeScript Examples

The following examples show how to use @material-ui/core#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: Thumbnail.tsx    From SpaceEye with MIT License 6 votes vote down vote up
BottomProgress = withStyles({
    root: {
        marginTop: 'calc(var(--height) - 6.62px)',
        height: '6.5px'
    },
    colorPrimary: {
        backgroundColor: '#567d2e'
    },
    barColorPrimary: {
        backgroundColor: '#96c267'
    }
})(LinearProgress)
Example #2
Source File: DaoSettings.tsx    From homebase-app with MIT License 6 votes vote down vote up
CustomFormikTextField = withStyles({
  root: {
    "& .MuiInput-root": {
      fontWeight: 300,
      textAlign: "initial",
    },
    "& .MuiInputBase-input": {
      textAlign: "initial",
    },
    "& .MuiInput-underline:before": {
      borderBottom: "none !important",
    },
    "& .MuiInput-underline:hover:before": {
      borderBottom: "none !important",
    },
    "& .MuiInput-underline:after": {
      borderBottom: "none !important",
    },
  },
})(FormikTextField)
Example #3
Source File: CreditView.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
CreditVal = withStyles(styles, { withTheme: true })((props:
  { valFormatted: string, isNegative: boolean }
  & WithStyles<typeof styles, true>) => {
  return (
    <span className={`${props.classes.root} ${props.isNegative ? props.classes.negative : ''}`}>
      {props.isNegative && (<span className={props.classes.negativeBrackets}>(</span>)}
      {props.valFormatted}
      {props.isNegative && (<span className={props.classes.negativeBrackets}>)</span>)}
    </span>
  )
})
Example #4
Source File: FilterDrawer.tsx    From crossfeed with Creative Commons Zero v1.0 Universal 6 votes vote down vote up
Wrapper = withStyles({
  root: {
    height: '100%',
    position: 'relative',
    flex: '0 0 250px',
    backgroundColor: '#f4f4f4',
    color: '#3D4551',
    overflowY: 'auto',
    zIndex: 10,
    borderRadius: 0,
    borderRight: '1px solid #C3C5C7',
    boxShadow: 'none'
  }
})(Paper)
Example #5
Source File: DatePicker.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
BootstrapInput = withStyles((theme: Theme) =>
  createStyles({
    root: {
      margin: `${theme.spacing(1)} 0px`,
      maxWidth: 300,
      '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',
      height: 25,
      '&:focus': {
        background: theme.palette.background.paper,
        borderRadius: 4,
      },
    },
  }),
)(InputBase)
Example #6
Source File: BootstrapButton.tsx    From community-repo with GNU General Public License v3.0 6 votes vote down vote up
BootstrapButton = withStyles({
  root: {
    boxShadow: 'none',
    textTransform: 'none',
    fontSize: 16,
    padding: '6px 12px',
    border: '1px solid',
    lineHeight: 1.5,
    color: '#ffffff',
    backgroundColor: '#4138ff',
    borderColor: '#4138ff',
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
    '&:hover': {
      backgroundColor: '#4138dd',
      borderColor: '#4138dd',
      boxShadow: 'none',
    },
    '&:active': {
      boxShadow: 'none',
      backgroundColor: '#4138ee',
      borderColor: '#4138ee',
    },
    '&:focus': {
      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
    },
  },
})(Button)
Example #7
Source File: ExpandableNavigation.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
StyledButton = withStyles({
  root: {
    position: 'absolute',
    left: '220px',
    top: '19px',
    padding: 0,
    minWidth: 0,
  },
})(Button)
Example #8
Source File: ReloadButton.tsx    From SpaceEye with MIT License 6 votes vote down vote up
ReloadButtonComp = withStyles({
    root: {
        position: 'absolute',
        top: '4px',
        right: '4px',
        'z-index': '1',
        transform: 'scale(0.70)',
        padding: '0'
    }
})(IconButton)
Example #9
Source File: FilterDrawer.tsx    From crossfeed with Creative Commons Zero v1.0 Universal 6 votes vote down vote up
AccordionSummary = withStyles({
  root: {
    color: '#3D4551',
    minHeight: 64,
    '&$expanded': {
      minHeight: 64
    },
    '&:focus': {
      outline: 'none !important'
    },
    '&$disabled': {
      opacity: 1,
      fontWeight: 600,

      '& svg': {
        opacity: 0.5
      }
    }
  },
  content: {
    flexFlow: 'column nowrap',
    alignItems: 'flex-start',
    justifyContent: 'center'
  },
  disabled: {},
  expanded: {}
})(MuiAccordionSummary)
Example #10
Source File: TransactionItem.tsx    From End-to-End-Web-Testing-with-Cypress with MIT License 6 votes vote down vote up
SmallAvatar = withStyles((theme: Theme) =>
  createStyles({
    root: {
      width: 22,
      height: 22,
      border: `2px solid ${theme.palette.background.paper}`,
    },
  })
)(Avatar)
Example #11
Source File: SettingsNotifications.tsx    From twitch-live-extension with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up
AntSwitch = withStyles(() => ({
    switchBase: {
        '&$checked': {
            color: blue[200],
            transform: 'translateX(21px)',
        },
        '&$checked + $track': {
            backgroundColor: blue[200],
        },
    },
    checked: {},
    track: {},
}))(Switch)
Example #12
Source File: LogsPage.tsx    From ow-mod-manager with MIT License 6 votes vote down vote up
LogCell = withStyles((theme) => ({
  body: {
    borderBottom: `1px solid rgba(255, 255, 255, 0.05)`,
  },
  stickyHeader: {
    paddingTop: theme.spacing(1),
    background: theme.palette.background.paper,
  },
}))(TableCell)
Example #13
Source File: index.tsx    From prism-frontend with MIT License 6 votes vote down vote up
ExportMenu = withStyles((theme: Theme) => ({
  paper: {
    border: '1px solid #d3d4d5',
    backgroundColor: theme.palette.primary.main,
  },
}))((props: MenuProps) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    {...props}
  />
))
Example #14
Source File: DialogTitle.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
DialogTitle = withStyles(styles)((props: DialogTitleProps) => {
  const { children, classes, setShowStats, ...other } = props;

  return (
    <MuiDialogTitle disableTypography className={classes.root} {...other}>
      <Typography variant="h6">{children}</Typography>
      <IconButton
        aria-label="close"
        className={classes.closeButton}
        onClick={() => setShowStats(false)}
      >
        <CloseIcon />
      </IconButton>
    </MuiDialogTitle>
  );
})
Example #15
Source File: YourTurnContent.tsx    From fishbowl with MIT License 6 votes vote down vote up
GreenCheckbox = withStyles({
  root: {
    color: grey[600],
    "&$checked": {
      color: green[600],
    },
  },
  checked: {},
})((props: CheckboxProps) => <Checkbox color="default" {...props} />)
Example #16
Source File: PullRequestGridColumn.tsx    From backstage with Apache License 2.0 6 votes vote down vote up
ColumnPaper = withStyles(theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
    padding: theme.spacing(2),
    backgroundColor:
      theme.palette.type === 'dark'
        ? theme.palette.grey[800]
        : theme.palette.grey[300],
    height: '100%',
  },
}))(Paper)
Example #17
Source File: styles.tsx    From twilio-voice-notification-app with Apache License 2.0 6 votes vote down vote up
CustomConnector = withStyles((theme: Theme) => ({
  alternativeLabel: {
    top: 22,
    left: 'calc(-50% + 23px);',
  },
  active: {
    '& $line': {
      borderColor: theme.palette.primary.dark,
    },
  },
  completed: {
    '& $line': {
      borderColor: theme.palette.primary.dark,
    },
  },
  line: {
    borderColor: theme.palette.grey[300],
    borderTopWidth: 3,
    borderRadius: 1,
  },
}))(StepConnector)
Example #18
Source File: styles.tsx    From DamnVulnerableCryptoApp with MIT License 6 votes vote down vote up
StyledTableCell = withStyles((theme: Theme) =>
  createStyles({
    head: {
      backgroundColor: amber[500],
      color: theme.palette.common.white,
    },
    body: {
      fontSize: 14,
    },
  }),
)(TableCell)
Example #19
Source File: badge.tsx    From jupyter-extensions with Apache License 2.0 6 votes vote down vote up
StyledChip = withStyles({
  root: {
    color: COLORS.white,
    backgroundColor: COLORS.inverse,
    borderRadius: 0,
    fontFamily: BASE_FONT.fontFamily as string,
    fontSize: 10,
    fontWeight: 100,
    paddingLeft: 1,
    paddingRight: 1,
    marginLeft: 4,
    marginRight: 4,
  },
})(Chip)
Example #20
Source File: CreditView.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
CreditVal = withStyles(styles, { withTheme: true })((props:
  { valFormatted: string, isNegative: boolean }
  & WithStyles<typeof styles, true>) => {
  return (
    <span className={`${props.classes.root} ${props.isNegative ? props.classes.negative : ''}`}>
      {props.isNegative && (<span className={props.classes.negativeBrackets}>(</span>)}
      {props.valFormatted}
      {props.isNegative && (<span className={props.classes.negativeBrackets}>)</span>)}
    </span>
  )
})
Example #21
Source File: context_menu.tsx    From jupyter-extensions with Apache License 2.0 6 votes vote down vote up
ContextMenuContainer = withStyles({
  paper: {
    border: '1px solid var(--jp-border-color0)',
    borderRadius: 0,
  },
  list: {
    padding: 0,
  },
})(Menu)
Example #22
Source File: ErrorPage.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up
class ErrorPage extends Component<Props & WithStyles<typeof styles, true>> {

  render() {
    return (
      <Box
        display='flex'
        justifyContent='center'
        alignItems='center'
        width='100%'
        height='100%'
      >
        {!!this.props.msg && (
          <Message className={this.props.classes.message}
            message={this.props.msg}
            severity={this.props.variant || 'error'}
          />
        )}
        {!!this.props.pageNotFound && (
          <ImgIso className={this.props.classes.pageNotFound} alt='Page not found' img={PageNotFoundImg} />
        )}
      </Box>
    );
  }
}
Example #23
Source File: NullEditor.tsx    From firetable with Apache License 2.0 6 votes vote down vote up
/**
 * Allow the cell to be editable, but disable react-data-grid’s default
 * text editor to show.
 *
 * Hides the editor container so the cell below remains editable inline.
 *
 * Use for cells that have inline editing and don’t need to be double-clicked.
 *
 * TODO: fix NullEditor overwriting the formatter component
 */
class NullEditor extends React.Component<
  EditorProps<any, any> & WithStyles<typeof styles>
> {
  getInputNode = () => null;
  getValue = () => null;
  render = () => null;
}
Example #24
Source File: Governance.tsx    From homebase-app with MIT License 6 votes vote down vote up
StyledSlider = withStyles({
  root: {
    textAlign: "center",
    width: "100%",
  },
  valueLabel: {
    textAlign: "center",
  },
  thumb: {
    height: 20,
    width: 20,
    top: "24.5%",
    backgroundColor: "#fff",
    border: "3px solid #fff",
  },
  track: {
    backgroundColor: "#4BCF93",
    borderRadius: "4px",
    height: 2,
  },
})(Slider)
Example #25
Source File: styles.ts    From twilio-voice-notification-app with Apache License 2.0 6 votes vote down vote up
WhiteTextField = withStyles((theme: Theme) =>
  createStyles({
    root: {
      '& .MuiOutlinedInput-root': {
        backgroundColor: theme.palette.common.white,
      },
    },
  })
)(TextField)
Example #26
Source File: Searchbar.tsx    From homebase-app with MIT License 6 votes vote down vote up
StyledInput = withStyles((theme: Theme) => ({
  root: {
    "& label.MuiInputLabel-root": {
      display: "none",
    },
    "& div.MuiInputBase-root": {
      fontSize: 18,
      height: 54,
      boxSizing: "border-box",
      background: theme.palette.primary.main,
      padding: "18px 22px",
      width: "100%",
      borderRadius: 4,
      marginTop: "0px !important",
      maxWidth: 571,
      "& input": {
        color: theme.palette.text.primary,
        textAlign: "start",
        "&:placeholder": {
          opacity: 0.8,
        },
      },
      "&:focus-visible": {
        outline: "none",
      },
    },
    "& .MuiInput-underline:before": {
      borderBottomColor: "transparent",
    },
    "& .MuiInput-underline:hover:before": {
      borderBottomColor: "transparent",
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: "transparent",
    },
  },
  input: {},
}))(TextField)
Example #27
Source File: index.ts    From listo with MIT License 6 votes vote down vote up
ExpansionPanel = withStyles({
  root: {
    border: 'none',
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiExpansionPanel)
Example #28
Source File: ListItemTextMultibleLine.tsx    From shadowsocks-electron with GNU General Public License v3.0 6 votes vote down vote up
ListItemTextMultibleLine = withStyles((theme: Theme) =>
  createStyles({
    primary: {
      wordBreak: 'break-all'
    },
    secondary: {
      wordBreak: 'break-all'
    }
  })
)(ListItemText)
Example #29
Source File: RiskCriteria.tsx    From listo with MIT License 5 votes vote down vote up
RiskCriteria = ({
  text,
  options,
  handleRiskOption,
  description,
}: Props) => {
  const classes = useStyles({});

  if (!options) {
    // TODO: this should be moved to pre-validation
    return null;
  }

  const selectedOption = options.find(o => o.selected);
  const value = selectedOption ? selectedOption.text : UNSELECTED_KEY;

  const ExpansionPanelDetails = withStyles(theme => ({
    root: {
      padding: theme.spacing(2),
      backgroundColor: '#f5f9fe',
    },
  }))(MuiExpansionPanelDetails);

  return (
    <React.Fragment>
      <Paper className={classes.root}>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <ExpansionPanel>
              <ExpansionPanelSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1a-content"
              >
                <Typography>{text}</Typography>
              </ExpansionPanelSummary>
              <ExpansionPanelDetails>
                <Typography>{description}</Typography>
              </ExpansionPanelDetails>
            </ExpansionPanel>
          </Grid>
          <Grid item xs={12}>
            <FormControl>
              <RadioGroup onChange={handleRiskOption} value={value}>
                {options.map(option => (
                  <FormControlLabel
                    key={option.text}
                    value={option.text}
                    control={<Radio />}
                    label={option.text}
                  />
                ))}
                <FormControlLabel
                  value={UNSELECTED_KEY}
                  control={<Radio />}
                  style={{ display: 'none' }}
                  label="Hidden"
                />
              </RadioGroup>
            </FormControl>
          </Grid>
        </Grid>
      </Paper>
    </React.Fragment>
  );
}