Inline media queries using react

Question

I have this section of code I am trying to render. At different viewports, the button styles change from underline to background color using a themeColor I pull from a JSON file with acting as my database in a sense. How do you write an 'else if' inline in react so when my state is "active" and the media query matches, the styles update accordingly?

const btnMobileStyle = useMediaQuery('(min-width: 375px)')
 const btnTabletStyle = useMediaQuery('(min-width: 768px)')

  const styles = {
    buttonMobile: (btnMobileStyle) => ({
      borderBottom: `2px solid ${themeColor}`,
    }),
    buttonTablet: (btnTabletStyle) => ({
      borderBottom: 'none',
      backgroundColor: `${themeColor}`,
    }),
  }

  return (
    <main className="main">
      <div className="main__btn-container">
        <button
          style={overviewActive ? styles.buttonMobile(btnMobileStyle) : {}}
          onClick={updateOverview}
          className="main__btn"
        >
          Overview
        </button>
        <button
          style={structureActive ? styles.buttonMobile(btnMobileStyle) : {}}
          onClick={updateStructure}
          className="main__btn"
        >
          Structure
        </button>
        <button
          style={surfaceActive ? styles.buttonMobile(btnMobileStyle) : {}}
          onClick={updateSurface}
          className="main__btn"
        >
          Surface
        </button>
      </div>

Answer 1

I was able to solve the issue using this code:

  const btnMobileStyle = useMediaQuery('(max-width: 768px)')



const styles = {
    btnMobile: (btnMobileStyle) => ({
      borderBottom: btnMobileStyle ? `2px solid ${themeColor}` : {},
      backgroundColor: btnMobileStyle ? 'transparent' : themeColor,
    }),
  }

  return (
    <main className="main">
      <div className="main__btn-container">
        <button
          style={overviewActive ? styles.btnMobile(btnMobileStyle) : {}}
          onClick={updateOverview}
          className="main__btn"
        >
          Overview
        </button>
        <button
          style={structureActive ? styles.btnMobile(btnMobileStyle) : {}}
          onClick={updateStructure}
          className="main__btn"
        >
          Structure
        </button>
        <button
          style={surfaceActive ? styles.btnMobile(btnMobileStyle) : {}}
          onClick={updateSurface}
          className="main__btn"
        >
          Surface
        </button>
      </div>
      <div className="main__img-container">
        <img
          className="main__planet-img"
          src={state.planetImg}
          alt={state.planetName}
        />
        <img
          className={
            surfaceActive
              ? 'main__planet-overlay main__planet-overlay--active'
              : 'main__planet-overlay'
          }
          src={state.planetImgOverlay}
          alt=""
        />
      </div>