React js different css same component

JavaScript
11

An example of how I am using it right now:

const MobileMenu = ({ visibility, setMobileMenuVisiblity }) => {
  const visible = visibility ? 'visible' : ''; // visible class will only be added if visiblity is truish

  return createPortal(
    <>
      <div
        className={`mobile-menu-overlay ${visible}`} 
        onClick={() => setMobileMenuVisiblity()}></div>
      <div className={`mobile-menu ${visible}`}>
        <div
          className="mobile-logo"
          onClick={() => {
            setMobileMenuVisiblity();

            history.push('/');
          }}>
          <Logo />
        </div>
        <hr />
        <Categories isMobileScreen={true} />
        <hr />
      </div>
    </>,
    document.querySelector('#mobile-menu')
  );
};

const mapState = state => {
  return {
    visibility: getMobileMenuVisibility(state),
  };
};

export default connect(mapState, { setMobileMenuVisiblity })(MobileMenu);

And here:

const Header = ({ setMobileMenuVisiblity }) => {
  return (
    <div className="container">
      <nav className="header-nav">
        <Breakpoint small down>
          <div className="nav-item  menu-bar">
             <MobileMenu />
          </div>
        </Breakpoint>
       </nav>
    </div>
  );
};