# makeStyles/classes mechanism

const useStyles = makeStyles(theme => {
  return {
    // styles applied to the root element
    root: { textAlign: 'middle' },
    // styles applied when component is active
    active: { border: '1px solid' },
    // styles applied when component is disabled
    disabled: { color: 'grey' }
  }
}, { name: 'BaseName'});

export const MyComponent = ({ className, isActive, isDisabled, ...props}) => {
    const classes = useStyles(props);
    // classes is an object containing css classnames
    // e.g. classes.root === 'BaseName-root'
    // classes.active === 'BaseName-active'
    const finalClassName = clsx(props.className, 
    classes.root, {
        [classes.active]: isActive, // only applied when isActive is true
        [classes.disabled]: isDisabled // only applied when isDisabled is true
    });
    return <div className={finalClassName} />
}

## CSS result
.BaseName-root { text-align: 'middle' }
.BaseName-active { border: '1px solid' }
.BaseName-disabled { color: 'grey' }

## JS Usage

JS: <MyComponent />
HTML: <div class="BaseName-root">

JS: <MyComponent className="kpap"/>
HTML: <div class="kpap BaseName-root">

JS: 
let customStyles = {
    root: { paddingTop: '15px'},
    active: { borderColor: 'green'}
}
<MyComponent classes={customStyles} isActive={true}/>
HTML: 
<styles>
.customStyles-182-root { padding-top: '15px' }
.customStyles-182-active { border-color: 'green' }
</styles>
<div class="customStyles-182-root customStyles-182-active BaseName-root BaseName-active">