Error with Col width on SSR

[notiles]

Hello we are using the grid on a Next.js project with Typascript and styled components.

The grid is badly interpreted on the new version (6 and above) but work well on 5.0.2.

Please find below a sample of code we got in our application and the result rendered with 5.02 and 6.2.1

<Row gutterWidth={80}>
         <Col md={6}>
                  <TextField data={media} />
        </Col>
</Row>

device Width : 375px
element inspected : Col

on 5.0.2 :

    box-sizing: border-box;
    min-height: 1px;
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0%;
    right: auto;
    left: auto;

on 6.2.1 we got :

    box-sizing: border-box;
    min-height: 1px;
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
    width: [object Object];
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 50%;
    margin-left: 0%;
    right: auto;
    left: auto;

Any idea ??

Thanks a lot

[notiles]

Ok ... After some investigation, the issue is due to SSR, I can fix it with the defaultScreenClass parameter.

But why this issue doesn't happened on older versions of react-grid-system?

So, on SSR the width passed from the Col element don't change and stay as something like : width: { xs: null, sm: null, md: 12, lg: null, xl: null }

But on client side, the width is not interpreted and don't appear in the css.

Is there a way to remove the width object property from theStyle object (in src/grid/Col/index.jsx) to avoid this dirty behavior ?

[gerbenmeyer]

Made a fix for the weird width property, so should be solved width the latest version (6.2.4 that is)!