可重用反应组件中的条件类

Question

我有一个 IconButton 组件，我想有条件地应用 className 道具，这样它就不会影响基本样式，而只会影响我选择的样式。在这种情况下，IconButton 将在仅声明为 linkIcon 的地方有一个悬停光标。否则，指针光标不显示。

我有两个这样声明的样式类：

const styles = {
    appbaricon: {
        '&:hover': {
            cursor: 'auto',
        },
    },
    linkicon: {
        '&:hover': {
            cursor: 'pointer',
        },
    },
};

我的自定义组件是这样的：

const CMAppBarIcon = (props) => {
    return (
        <IconButton
            className={props.classes.appbaricon}
            disableRipple>
            {props.children}           
        </IconButton>
    );
};

写法，我是把appbaricon样式传给带props的类，我需要写一个规则，如果传递了一个propisLink="true"，则应用className={props.classes.linkicon}，否则保持className={props.classes.appbaricon}

提前致谢

Answer 1

像下面这样使用它

const CMAppBarIcon = (props) => {
    return (
        <IconButton
            className={props.isLink ? props.classes.linkicon : props.classes.appbaricon}
            disableRipple>
            {props.children}           
        </IconButton>
    );
};