losing style on page reload

Description

After gatsby build the app works fine until I reload the page. It then loose styles coming from material-ui in a specific component.

The app works fine:

• in development
• in production, for as long as no page reload is hit

No error message is thrown, either in the build process or when the problem actually happens, ie, page reload.

Steps to reproduce

• run gatsby build
• run gatsby serve or deploy to Netlify
• hit page reload in the browser

You can see it for yourself. The app is available on Netlify at https://musing-davinci-538143.netlify.com/

Just load the app, scroll down to the footer and then reload the page.

After that, if you clear the browser cache and reload the app it will work correctly again. Till a new page reload.

Expected result

Page reload should not impact the app styles.

Actual result

As explained.

Environment

System: OS: macOS 10.15.3 CPU: (4) x64 Intel® Core™ i5-4570S CPU @ 2.90GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.16.3 - /usr/local/bin/node npm: 6.9.0 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 80.0.3987.87 Firefox: 65.0.1 Safari: 13.0.5 npmPackages: gatsby: ^2.18.2 => 2.18.2 gatsby-cli: ^2.6.4 => 2.6.4 gatsby-image: ^2.2.33 => 2.2.33 gatsby-link: ^2.2.24 => 2.2.24 gatsby-plugin-create-client-paths: ^2.1.17 => 2.1.17 gatsby-plugin-eslint: ^2.0.8 => 2.0.8 gatsby-plugin-manifest: ^2.2.29 => 2.2.29 gatsby-plugin-material-ui: ^2.1.6 => 2.1.6 gatsby-plugin-offline: ^3.0.22 => 3.0.22 gatsby-plugin-react-helmet: ^3.1.15 => 3.1.15 gatsby-plugin-sass: ^2.1.23 => 2.1.23 gatsby-plugin-sharp: ^2.3.2 => 2.3.2 gatsby-source-filesystem: ^2.1.38 => 2.1.38 gatsby-source-graphql: ^2.1.24 => 2.1.24 gatsby-transformer-sharp: ^2.3.5 => 2.3.5

This is the component where the error appears.

/src/components/footerCategoryLinks.js

  import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import { MenuList, MenuItem } from '@material-ui/core';
 import { Link } from 'gatsby';
 import Divider from '@material-ui/core/Divider';
import PropTypes from 'prop-types';

const styles = (theme) => ({
allCats: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 180px))',
    padding: '10px',
    justifyContent: 'space-evenly',
    [theme.breakpoints.down('xs')]: {
        display: 'block',
        margin: '0 auto',
        maxWidth: '280px',
    },
    '& a': {
        textDecoration: 'none',
    },
    '& li': {
        color: '#2d5074',
        paddingTop: '4px',
        paddingBottom: '4px',
    },
},
type: {
    textTransform: 'uppercase',
    fontWeight: '700',
    fontSize: '1rem',
},
cat: {
    '& li': {
        textTransform: 'uppercase',
        fontWeight: '600',
        fontSize: '.8rem',
    },
},
subcat: {
    '& li': {
        marginLeft: '10px',
        fontSize: '0.8rem',
        textTransform: 'capitalize',
    },
},
empty: {
    visibility: 'hidden',
},
});

const CategoryLinks = (props) => {
const { categories, classes } = props;
const main = ['objects', 'services'];
const output = [];
let rows = [];
let ctRows = 0;
const catLength = categories.length;
main.forEach((type) => {
    rows.push(<MenuItem className={classes.type} key={type}>{type}</MenuItem>);
    ctRows++;
    categories.forEach((row, catIndex) => {
        if (row.root && row.root.title === type &&
            row.parent.title === type) {
            let parentTitle = row.title.replace(' ', '-');
            parentTitle = parentTitle.replace(',', '');
            if (ctRows > 1 && ctRows < 6) {
                rows.push(
                    <Divider
                        key={`${row.title}${Math.floor(
                            Math.random() * 100000,
                        )}`}
                    />,
                );
            }
            if (ctRows === 0) {
                rows.push(
                    <MenuItem
                        key={Math.floor(Math.random() * 100000)}
                        className={classes.empty}
                    >
                        empty
                    </MenuItem>,
                );
            }
            rows.push(
                <Link
                    className={classes.cat}
                    key={row.id}
                    to={`/search/${type}/${parentTitle}`}
                >
                    <MenuItem key={row.id}>{row.title}</MenuItem>
                </Link>,
            );
            ctRows++;
            categories.forEach((row1) => {
                if (row1.parent && row1.parent.title === row.title) {
                    rows.push(
                        <Link
                            className={classes.subcat}
                            key={row1.id}
                            to={`/search/${type}/${parentTitle}/${row1.title.replace(' ', '-')}`}
                        >
                            <MenuItem key={row1.id}>{row1.title}</MenuItem>
                        </Link>,
                    );
                    ctRows++;
                }
            });
        }
        if (ctRows > 5 || catIndex === catLength - 1) {
            output.push(<div key={Math.floor(Math.random() * 100000)}>{rows}</div>);
            rows = [];
            ctRows = 0;
        }
    });
});
return (
    <div>
        <MenuList className={classes.allCats}>
            {output.map((item) => {
                return item;
            })}
        </MenuList>
    </div>
);
};

CategoryLinks.propTypes = {
    categories: PropTypes.array.isRequired,
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CategoryLinks);

[BernardA]

Not stale. Ongoing issue.

[BernardA]

@chivongv . I agree with you concerning the status. This should be a bug, not question/discussion. It’s up to the moderators though.

Concerning the issue as such, I worked around it by removing react-material-ui’s withStyles and added back the same styles using scss like so:

import styles from '../styles/footerCategory.module.scss';

Again, this is a work around and as I stated above, I use withStyles extensively all over my app. Only this specific instance is generating an issue. Not sure what’s specific about it.