Применение темы / стиля ко всем тегам html / реагировать с помощью селектора внутри компонента

Question

Я попытаюсь привести минимальный пример того, чего я пытаюсь достичь, я использую Стили пользовательского интерфейса для стилей своих компонентов, я хотел стилизовать все теги <Link> в моемкомпонента, например:

const useStyles = makeStyles(theme => ({
    menuLink: theme.styles.menuLinkStyle,
}));

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

    // noinspection JSUnresolvedVariable
    return (
        <div>
            <div className={classes.toolbar}>
                <Link to='/' className={classes.menuLink}> {/*<==== This*/}
                    Hello
                </Link>
            </div>
            <Divider/>
            <List>
                <Link to={'/users'} className={classes.menuLink}> {/*<==== This*/}
                    World
                </Link>
            </List>
        </div>
    );
}

export default DrawerContents;

Как видите, мне нужно вручную дать className={classes.menuLink} каждому тегу <Link>, мне было интересно, есть ли возможность назначить classes.menuLink для каждого тега <Link> по умолчанию, что-то вроде этого:

const useStyles = makeStyles(theme => ({
    Link: theme.styles.menuLinkStyle,
}));

Без необходимости писать className={classes.menuLink} для каждого тега <Link> в моем компоненте.

Есть литакая вещь?

Answer 1

Я бы справился с этим, чтобы создать новый компонент, который позаботится о стилях:

const useStyles = makeStyles(theme => ({
    menuLink: theme.styles.menuLinkStyle,
}));

function MenuLink(props) {
    const classes = useStyles(props);
    return <Link {...props} className={classes.menuLink}/>;
}

Затем импортируйте этот компонент и используйте его вместо Link.