Question

我将尝试给出一个最小的示例，以说明要实现的目标，我使用Material UI Styles设置组件样式，我想设置组件中所有<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分配给每个{{ 1}}标签，默认情况如下：

<Link>

无需为组件中的每个const useStyles = makeStyles(theme => ({ Link: theme.styles.menuLinkStyle, }));标签编写className={classes.menuLink}。

有这样的东西吗？

Answer 1

我要处理的方式是创建一个负责样式的新组件：

 public function checkPostAuth(UserInterface $user)
    {
        if (!$user instanceof AppUser) {
            return;
        }

        if (!$user->getIsActive()) {
            throw new \Exception("ce membre n'est pas actif");
        }

    }

然后导入该组件并使用它代替const useStyles = makeStyles(theme => ({ menuLink: theme.styles.menuLinkStyle, })); function MenuLink(props) { const classes = useStyles(props); return <Link {...props} className={classes.menuLink}/>; }。

使用组件内的选择器将主题/样式应用于所有html / react标签

1 个答案: