How do I access styles object inside React container?

Question

I'm working on app and I used some ready components from a library. There is functional component where inline styles for divs are taken from object included in this component.

<div style={styles.chatsContainer} className='ce-chats-container'>

and this object is below return function

const styles = {
    chatListContainer: {
        maxHeight: '100vh',
        overflow: 'scroll',
        overflowX: 'hidden',
        borderRight: '1px solid #afafaf',
        backgroundColor: 'white',
        fontFamily: 'Avenir'
    },
    chatsContainer: {
        width: '100%',
        height: '440px',
        backgroundColor: 'white',
        borderRadius: '0px 0px 24px 24px'
        
    },
}

My question is - how do I access those values so I can change them with onClick?

I tried changing it like this, didn't work ('values read-only')

styles.chatsContainer.height = "250px !important"

I tried setting state in styles object but there are errors "chatsHeight is not defined"

const [chatsHeight, setChatsHeight] = useState("440px")

chatsContainer: {
        width: '100%',
        height: chatsHeight,
        backgroundColor: 'white',
        borderRadius: '0px 0px 24px 24px'
}
    

Answer 1

You can create a separate style for that task:

const styles = {
    chatsContainer: {
        width: '100%',
        height: '440px',
        backgroundColor: 'white',
        borderRadius: '0px 0px 24px 24px' 
    },
    newHeight: {
        height: '250px'
    }
}

and then you can create a state that adds your newHeight style on your div when the state is true;

const [add, setadd]= useState(false)

const onClickHandler= ()=>{
setadd(!add)
}

 <div style={`${styles.chatsContainer} ${add && style.newHeight}`} className='ce-chats-container'>

And dont forget to trigger your onClickHandler function.