我的Material UI AppBar走对了吗？

Question

我正在为我的网站标题工作，并希望使用材料UI。标题包括一个徽标，一些导航链接，一个带有下拉菜单的头像，等等。我的问题现在围绕着导航链接的样式。使用Material-UI，我是否需要将类应用到我想要样式化的/ want /元素？例如，我目前有一个应用程序，它看起来像这样：

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Avatar from '@material-ui/core/Avatar';
import CssBaseline from '@material-ui/core/CssBaseline';
import IconButton from '@material-ui/core/IconButton';
import Link from '@material-ui/core/Link';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import theme from './theme';
import { ThemeProvider } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: '#202632',
  },
  headerLink: {
    padding: '10px 20px',
  }

}));

function App() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const classes = useStyles();

  return (
    <div className="App">
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <AppBar className={classes.root}>
          <Toolbar className={classes.logo}>
            <img alt="Logo" src="/logo2.png" height={60} />
            <Link className={classes.headerLink} href="/dashboard">
              Solutions
            </Link>
            <Link className={classes.headerLink} href="/clientportal">
              Features
            </Link>
            <Link className={classes.headerLink} href="/pricing">
              Pricing
            </Link>
            <Link className={classes.headerLink}>
              Our team
            </Link>
            <Link className={classes.headerLink}>
              Blog
            </Link>
            <Avatar onClick={handleClick} onClose={handleClose}>
              DM
            </Avatar>
            <Menu anchorEl={anchorEl} open={Boolean(anchorEl)}>
              <MenuItem onClick={handleClose}>Item1</MenuItem>
              <MenuItem onClick={handleClose}>Item2</MenuItem>
              <MenuItem onClick={handleClose}>Item3</MenuItem>
            </Menu>
          </Toolbar>
        </AppBar>
      </ThemeProvider>
    </div>
  );
}

export default App;

我设计链接样式的典型方式是CSS，使用像nav a { padding: 20px }这样的东西，但是这似乎不是Material-UI的惯用方式。也许我的假设是错误的，所以我想在这里验证一下样式重写的最佳方法是什么。

谢谢

Answer 1

对于这个特定的场景，我将使用withStyles创建Link的样式版本。这将具有与psyrendust的答案相同的效果，但使用withStyles可以消除所有的样板文件。

import React from ‘react’;
import Link from '@material-ui/core/Link';
import { withStyles } from '@material-ui/core/styles';

const AppBarLink = withStyles({ 
    root: {
        padding: '10px 20px'
    }
})(Link);

export AppBarLink;

只有当您想要从多个文件中利用它时，才有必要将它放在自己的文件中并导出它。如果您只在一个文件中使用它，那么只需在那里定义它。

如果您想控制除样式之外的道具，您可以利用defaultProps，如下面的工作示例所示：

import React from "react";
import Link from "@material-ui/core/Link";
import { withStyles } from "@material-ui/core/styles";

const AppBarLink = withStyles({
  root: {
    padding: "10px 20px"
  }
})(Link);
AppBarLink.defaultProps = {
  color: "secondary"
};

export default function App() {
  return (
    <div className="App">
      <Link>Here is Link (no padding or color override)</Link>
      <br />
      <AppBarLink>Here is AppBarLink</AppBarLink>
      <br />
      <AppBarLink color="primary">
        Here is AppBarLink with explicit color of primary
      </AppBarLink>
    </div>
  );
}

​

​

Answer 2

您可以为Link创建一个SFC。

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

const useStyles = makeStyles(theme => ({
    headerLink: {
        padding: '10px 20px',
    }
}));

const AppBarLink = React.forwardRef(function AppBarLink({ children, className, ...props }, ref) {
    const classes = useStyles();
    return (
        <Link
            className={`${classes.headerLink} ${className}`}
            ref={ref}
            {...props}
        >
            {children}
        </Link>
    );
});

export AppBarLink;