Button

Button

従属関係

Contained Buttons

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1),
  },
}));

export default function ContainedButtons() {
  const classes = useStyles();

  return (
    <div>
      <Button variant="contained" color="secondary" disabled href="#contained-buttons" className={classes.button}>
        Default
        Primary
        Secondary
      </Button>
    </div>
  );
}

Outlined Buttons

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1),
  },
  input: {
    display: 'none',
  },
}));

export default function OutlinedButtons() {
  const classes = useStyles();

  return (
    <div>
      <Button variant="outlined" color="Primary" href="#outlined-buttons" className={classes.button}>
        Default
        Primary
        Secondary
        Disabled
        Link
      </Button>
      <Button variant="outlined" color="inherit" className={classes.button}>
        Inherit
      </Button>
    </div>
  );
}

Routing

<Router>
  <div>
    <Button color="primary" component={Link1} to="/">
      With prop forwarding
    </Button>
    <br />
    <Button color="primary" component={Link2}>
      Without prop forwarding
    </Button>
  </div>
</Router>

Link

<Router>
  <div>
    <Link component={Link1} to="/">
      With prop forwarding
    </Link>
    <br />
    <Link component={Link2}>Without prop forwarding</Link>
  </div>
</Router>

Link

import { Link } from 'react-router-dom';

<ListItem button component={Link} to="/">

import { Link } from 'react-router-dom';

function ListItemLink(props) {
  const { icon, primary, to } = props;

  const renderLink = React.useMemo(
    () =>
      React.forwardRef((linkProps, ref) => (
        // With react-router-dom@^6.0.0 use `ref` instead of `innerRef`
        // See https://github.com/ReactTraining/react-router/issues/6056
        <Link to={to} {...linkProps} innerRef={ref} />
      )),
    [to],
  );

  return (
    <li>
      <ListItem button component={renderLink}>
        <ListItemIcon>{icon}</ListItemIcon>
        <ListItemText primary={primary} />
      </ListItem>
    </li>
  );
}