Ternary Operator for If/Else if/Else Statements

Question

I'm trying to do some conditional styling in React js. I'm very new to React so there may be a better way to do this, but searching the internet to no avail. I'm trying to check screen size and style based on said screen size. In this use case, I want to center some text based on the screen size. Can someone tell me if there is a better way to do this? Currently this doesn't work for me.

EDIT: Putting some logs in there and what it does is that when the page loads "textAlign" is not applied to the element at all, even though the screen size is > 993px. Once I shrink the screen to < 993px and > 578px it applies "textAlign:center" to the element, then once it shrinks to < 578px it doesn't set it back to None. It keeps it centered.

const styles = {
    footerColOne:{
        textAlign: deviceSize > 993 ? "none" : (deviceSize < 993 && deviceSize > 578) ? "center" : "none",
        paddingLeft: deviceSize < 993 ? "26px" : "80px",
        paddingTop: deviceSize < 993 ? "28px" : "63px",
    },
    footerColTwo:{
        textAlign: deviceSize > 993 ? "none" : (deviceSize < 993 && deviceSize > 578) ? "center" : "none",
        paddingLeft: deviceSize < 993 ? "26px" : deviceSize < 578 ? "51px" : "50px",
        paddingTop: deviceSize < 993 ? "40px" : "86px",
    },
  }

Then I call this style

<Col lg={3} style={ styles.footerColOne }>

Any help is greatly appreciated.

Last edit:

So I figured out that media queries were indeed the preferred way here, even though I made an idiot mistake and set textAlign to none when the value didn't exist for the property, but My ternary condition above works. In this case it should be set to initial.

Answer 1

const getDevice = (deviceSize) => 
    deviceSize < 993 
        ? (deviceSize < 993 && deviceSize > 578) 
            ? 'tablet'
            : 'mobile'
        : 'web'


// if declare css -> return class
// component use className instead of styles
// 
const footerColOne = {
    'web': () => {

        return {
            textAlign: 'none',
            paddingLeft: '26px',
            paddingTop: '28px'
        }
    },
    'tablet': () => {
        return {
            textAlign: 'center',
            paddingLeft: '80px',
            paddingTop: '63px'
        }
    },
    'mobile': () => {
        return {
            textAlign: 'none',
            paddingLeft: '80px',
            paddingTop: '63px'
        }
    }
}


const styles = {
    footerColOne: footerColOne[getDevice(deviceSize)]()
}

console.log(styles.footerColOne)

// 

Answer 2

media query is a perfect fit here.

@media screen and (min-width: 578px) and (max-width: 993px) {
  .someclass {
   text-align:center;
  }
}

@media screen and (max-width: 993px) {
  .someclass {
   text-align:center;
   padding-left:26px;
   padding-right:28px;
  }
}

@media screen and (min-width: 993px) {
  .someclass {
    text-align:left /* none as you wanted. /*;
  }
}

In this case,

max-width If the screen size is lower than this max-width, all styles in this media query will be applied.

If the screen size is larger than min-width, all styles in this media query will be applied.