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

Question

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!

question from:https://stackoverflow.com/questions/65924560/how-can-i-pass-my-theme-classes-in-my-react-function-to-stylize

Answer 1

The error you're getting is because the className prop is a string prop, not an object prop and you're treating it as an object but you're not setting a key for that object value, that is why it won't compile, because the syntax is wrong, do this instead:

<Button
 {...{
   key: label,
   color: "inherit",
   to: href,
   component: RouterLink,
   className: classes.menuButton
  }
 }
>
 {label}
</Button>

Suggestion: I would use the regular syntax in the Button component because you're not making any conditional prop that might require the use of the object syntax

<Button
 key={label}
 color="inherit"
 to={href}
 component={RouterLink}
 className={classes.menuButton}
>
 {label}
</Button>