How can I pass my theme classes in my react function to stylize?

Trying to stylize my React header buttons, however I cannot pass my classes function which uses useStyles()

The error originations from: className: {classes.menuButton} in my getMenuButtons function

const useStyles = makeStyles((theme) => ({
    appBar: {
        borderBottom: `1px solid ${theme.palette.divider}`,
    },
    link: {
        margin: theme.spacing(1, 1.5),
    },
    toolbarTitle: {
        flexGrow: 1,
        fontFamily: 'Track',
        textAlign: "left"
    },
    menuButton: {
        fontWeight: 700,
        size: "18px",
        marginLeft: "38px",
    }
}));


function Header() {
    const classes = useStyles();

    const displayDesktop = () => {
        return <Toolbar>
                    {WelcomeLogo }
                    {getMenuButtons()}
                </Toolbar>;
      };

    const WelcomeLogo = (
        <Typography variant="h6" component="h1" className={classes.toolbarTitle} color="inherit">
          Welcome
        </Typography>
      );
    
    const getMenuButtons = () => {
        return headersData.map(({ label, href }) => {
            return (
                <Button
                {...{
                    key: label,
                    color: "inherit",
                    to: href,
                    component: RouterLink,
                    className: {classes.menuButton}
                }}
                >
                    {label}
                </Button>
          );
        });
      };

The only error I’m getting is failed to compile, I want to be able to add my style classes to getMenuButtons() for button styling, thank you for help!

75 thoughts on “How can I pass my theme classes in my react function to stylize?”