Question

我有一个IconButton组件，我想有条件地应用className props，这样它不会影响基本样式，只影响我选择的那些。在这种情况下，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的类，我需要编写一条规则，如果传递道具isLink="true"，则应用className={props.classes.linkicon}否则保持{{ 1}}

提前致谢

Answer 1

使用如下

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

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

1 个答案: