CODEWITHSUNDEEP
reactjs
LOTUSMS
LOTUSMS

Reputation: 10240

Conditional classes in a reusable react component

I have an IconButton component that I want to apply className props conditionally so that it doesn't affect the base styles but only the ones I am choosing to. In this case, the IconButton will have a hover cursor in places where it is declared as a linkIcon only. Otherwise, the pointer cursor doesn't show.

I have two style classes declared like this:

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

and my custom component like this:

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

the way it is written, I am passing the appbaricon styles to the class with props, I need to write a rule that if a prop isLink="true" is passed, then apply className={props.classes.linkicon} otherwise keep className={props.classes.appbaricon}

Thanks in advance

Upvotes: 0

Views: 171

Answers (1)

Jeeva
Jeeva

Reputation: 1590

Use it like below

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

Upvotes: 1

Related Questions