Is it possible to have width and position

[oliverwatkins]

Summary:

Is it possible to have width and position as a react prop?

Steps to reproduce:

I have some inline code that looks like this :

        let modalStyle = {
            overlay: {
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                zIndex: 998,
                backgroundColor: 'rgba(255,255,255,0.4)',
            },
            content: {
                //BC
                width,
                top: position ? position.y : '4vh',
                left: position ? position.x : 'unset',
                right: 'unset',
                bottom: 'unset',
                border: '1px solid #ccc',
                background: '#fff',
                overflow: 'visible auto',
                WebkitOverflowScrolling: 'touch',
                borderRadius: '4px',
                outline: 'none',
                padding: '0',
                maxHeight: '92vh'
            }
        }

Everything is static exception for width and position. These need to be dynamically calculated.

We would like to move all the CSS into a seperate CSS file, and have the inline calculated in the react component.

If we do something inline like this :

        let modalStyle = {
            content: {
                width,
                top: position ? position.y : '4vh',
                left: position ? position.x : 'unset',
            }
        }

Then whatever is defined for content in the CSS file will be overwritten.

Are there props that can be used to set these values ?

eg:

<ReactModel width={width} position={position} ..>

[diasbruno]

@oliverwatkins Can you make a reproducible example, please? That way it will be easy to debug.

[oliverwatkins]

alright, ill get onto it soon

[lipe-dev]

have you tried memoizing the modalStyles with useMemo?