@material-ui/core#WithStyles TypeScript Examples

BottomProgress = withStyles({
    root: {
        marginTop: 'calc(var(--height) - 6.62px)',
        height: '6.5px'
    },
    colorPrimary: {
        backgroundColor: '#567d2e'
    },
    barColorPrimary: {
        backgroundColor: '#96c267'
    }
})(LinearProgress)

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)

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>
  )
})

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)

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)

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)

StyledButton = withStyles({
  root: {
    position: 'absolute',
    left: '220px',
    top: '19px',
    padding: 0,
    minWidth: 0,
  },
})(Button)

ReloadButtonComp = withStyles({
    root: {
        position: 'absolute',
        top: '4px',
        right: '4px',
        'z-index': '1',
        transform: 'scale(0.70)',
        padding: '0'
    }
})(IconButton)

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)

SmallAvatar = withStyles((theme: Theme) =>
  createStyles({
    root: {
      width: 22,
      height: 22,
      border: `2px solid ${theme.palette.background.paper}`,
    },
  })
)(Avatar)

AntSwitch = withStyles(() => ({
    switchBase: {
        '&$checked': {
            color: blue[200],
            transform: 'translateX(21px)',
        },
        '&$checked + $track': {
            backgroundColor: blue[200],
        },
    },
    checked: {},
    track: {},
}))(Switch)

LogCell = withStyles((theme) => ({
  body: {
    borderBottom: `1px solid rgba(255, 255, 255, 0.05)`,
  },
  stickyHeader: {
    paddingTop: theme.spacing(1),
    background: theme.palette.background.paper,
  },
}))(TableCell)

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}
  />
))

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>
  );
})

GreenCheckbox = withStyles({
  root: {
    color: grey[600],
    "&$checked": {
      color: green[600],
    },
  },
  checked: {},
})((props: CheckboxProps) => <Checkbox color="default" {...props} />)

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)

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)

StyledTableCell = withStyles((theme: Theme) =>
  createStyles({
    head: {
      backgroundColor: amber[500],
      color: theme.palette.common.white,
    },
    body: {
      fontSize: 14,
    },
  }),
)(TableCell)

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)

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>
  )
})

ContextMenuContainer = withStyles({
  paper: {
    border: '1px solid var(--jp-border-color0)',
    borderRadius: 0,
  },
  list: {
    padding: 0,
  },
})(Menu)

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>
    );
  }
}

/**
 * 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;
}

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)

WhiteTextField = withStyles((theme: Theme) =>
  createStyles({
    root: {
      '& .MuiOutlinedInput-root': {
        backgroundColor: theme.palette.common.white,
      },
    },
  })
)(TextField)

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)

ExpansionPanel = withStyles({
  root: {
    border: 'none',
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      margin: 'auto',
    },
  },
  expanded: {},
})(MuiExpansionPanel)

ListItemTextMultibleLine = withStyles((theme: Theme) =>
  createStyles({
    primary: {
      wordBreak: 'break-all'
    },
    secondary: {
      wordBreak: 'break-all'
    }
  })
)(ListItemText)

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>
  );
}