Material UI Tricks

material-ui-tricks.md

Add class

  render(): JSX.Element {
    const {classes, title} = this.props;
    return (
      <>
         <TextField
           className={classes.TextField}
           ...
         />
      </>
    );
  }

Merge classes

import classNames from 'classnames';

...

<FormControl className={classNames(classes.TextField, classes.Button)}>
  ...
</FormControl>

import clsx from 'clsx';

...

<FormControl className={clsx(classes.TextField, classes.Button)}>
  ...
</FormControl>

Another option would be "classcat".

Benchmarks of all three: https://github.com/lukeed/clsx/tree/v1.0.4/bench

Inline onChange Listener

<TextField
  autoComplete="off"
  className={classes.TextField}
  error={this.state.hasFailed}
  label="Passphrase"
  margin="normal"
  onChange={event => this.setState({accountApiPassphrase: event.target.value})}
  required={false}
  value={this.state.accountApiPassphrase}
  variant="outlined"
/>

      onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
        updateSelection(event.target.value);
      }}

Building selects

<FormControl className={classes.TextField}>
  <InputLabel htmlFor="age-simple">Age</InputLabel>
  <Select
    value={this.state.interval}
    onChange={(event: React.ChangeEvent<{name?: string; value: unknown}>) => {
      this.setState({interval: event.target.value});
    }}
    inputProps={{
      name: 'age',
      id: 'age-simple',
    }}
  >
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</FormControl>

<TextField
  className={classes.TextField}
  label="Age"
  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(event.target.value, 10);
    this.setState({interval: value});
  }}
  required={true}
  select={true}
  value={this.state.interval}
  variant="outlined">
  {[
    {name: 'Ten', value: 10},
    {name: 'Twenty', value: 20},
    {name: 'Thirty', value: 30},
  ].map((entry, index) => {
    return <MenuItem key={index} value={entry.value}>
      {entry.name}
    </MenuItem>
  })}
</TextField>
<br/>

Render withStyles

const JsonTextField = withStyles(styles)((props: TextFieldProps & WithStyles<typeof styles>) => {
  const {classes} = props;

  return (
    <TextField
      {...props}
      fullWidth
      multiline
      rows={4}
      rowsMax={Infinity}
      variant="outlined"
      InputProps={{
        className: classes.textArea,
      }}
    />
  );
});

Create :hover effect

const styles = (theme: Theme) =>
  createStyles({
    Toolbar: {
      '&:hover': {
        textDecoration: 'none',
      },
    }
  });

Simple component

import React from 'react';
import {WithStyles} from '@material-ui/core/styles';
import {
  createStyles,
  Theme,
  withStyles,
} from '@material-ui/core';

const styles = (theme: Theme) =>
  createStyles({
    TestDesign: {
      color: theme.palette.text.secondary,
    },
  });

interface Props extends WithStyles<typeof styles> {
  something: string;
}

interface State {
  something: string;
}

class MyPage extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      something: 'Hello, World!'
    }
  }

  render(): JSX.Element {
    const {classes} = this.props;    
    return (<p className={classes.TestDesign}>{`${this.state.something}`}</p>)
  }
}

export default withStyles(styles)(MyPage);