我的 Material UI AppBar 是否在正确的轨道上？

Question

我正在为我的网站制作标题，并希望使用 Material UI。标题包括一个徽标、一些导航链接、一个带有下拉列表的头像等。我的问题围绕着现在的导航链接样式。使用 Material-UI，我是否需要将类应用于我想要设置样式的 /every/ 元素？例如，我目前有一个看起来像这样的应用程序：

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

您可以为链接创建 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;

Answer 2

对于这个特定的场景，我会使用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>
  );
}