Gatsby causing issues with Material UI v5 server side rendering CSS arrangement

I shared my problem on this GitHub issue too: https://github.com/mui-org/material-ui/issues/25312

Currently, I'm working with the Gatsby example provided in Material UI v5: https://github.com/mui-org/material-ui/tree/next/examples/gatsby

After implementing their example, I included the following code snippet:

import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  typographyHeader: {
    fontWeight: 'bold',
    fontSize: () => 30,
    color: '#292929',
  },
});

<Typography classes={{ root: classes.typographyHeader }} align="center">
  Gatsby v5-alpha example
</Typography>

When running npm run develop in a browser with JavaScript enabled, I get this output:

https://i.sstatic.net/2ChIM.png

However, when running npm run develop with JavaScript disabled (resulting in SSR), I see this instead:

https://i.sstatic.net/GVyMV.png

In the second screenshot, you can observe that my custom styles are being overridden by Material UI's default styles. The same issue occurs even when utilizing withStyles.

Can someone guide me on the correct configuration to prevent Material UI v5 from overriding my custom styles?

javascriptcssreactjsmaterial-ui

Answer №1

Sharing the response from MUI's founder on the GitHub issue because it will impact many Gatsby users in the future.

@MartinDawson I reviewed your issue and it seems that the current API exposed by Gatsby and emotion cannot solve this problem. What we really need is the ability to extract CSS output from the HTML page and inline it in the initial SSR request before the JSS output.

You have 3 options:

1. Discontinue using makeStyles/withStyles API as we plan to deprecate them in v5 (and remove in v6). Consider migrating to Next.js or using styled-components instead of emotion, which doesn't render its style inside the body and should handle injection order correctly with Gatsby plugins.

Based on my research, makeStyles and withStyles do not function properly with SSR in Gatsby.

The optimal solution is to utilize the new sx prop, which can perform everything that these functions can do, including media queries and using the theme prop. The only downside is it may be slightly slower for extensive use cases.

Refer to the documentation here: https://web.archive.org/web/20210116082036/https://next.material-ui.com/system/basics/#the-sx-prop

For any other specific scenarios, consider utilizing the styledComponents API as it should work with the setup.

Update:

Also, check out this comment: https://github.com/mui-org/material-ui/issues/25312#issuecomment-900163029

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever I build my application locally, it successfully deploys on Netlify. However, when I try to deploy it from GitHub, the application doesn

After completing my portfolio, I attempted to host it on netlify using github, but encountered difficulty. The documentation and build log provided by Netlify were so perplexing that I struggled to troubleshoot the issue. It wasn't until I ran npm run ...

node.jsreactjsgithubnpmnetlify

Sending a function return to a React component

What I want to achieve is sending the response from an API call to a React Component and using it to generate a List. My confusion lies in how to pass the value from a function to the component. Do I require state for this process? searchMealsHandler(even ...

javascriptreactjs

In order to check a checkbox, you need to ensure that the scrolling div has been scrolled to the very

I have a situation where I need to ensure that a user has scrolled to the bottom of a disclaimer before they can acknowledge it by checking a checkbox. Our legal department requires this extra step for compliance reasons. Here is an example of how the mark ...

jquerycsscheckboxscrollonchange

Issue regarding custom CSS implementation in Angular project

Being a French speaker, I apologize in advance for any mistakes I might make. I am also fairly new to Angular, so if you could provide detailed explanations in your responses, it would be greatly appreciated. Thank you. I am trying to import a custom CSS ...

htmlcssangulartypescript

Issue with Angular FormControl Pattern Validator failing to validate against regex pattern

My goal is to restrict a text input field to specific characters only. I am looking to allow: alphanumeric characters (a-z A-Z 0-9) 3 special characters (comma, dash, single quotation mark) : , - ' A few accented characters: à â ç è é ê î ô ...

javascripthtmlregexangularforms

What do you think of the unique JSON syntax found in the React-Redux-Firebase documentation? Valid or not?

The React-Redux-Firebase documentation showcases a sample code snippet. import { compose } from 'redux' import { connect } from 'react-redux' import { firebaseConnect, populate } from 'react-redux-firebase' const populates = ...

javascriptjsonreactjsreact-reduxreact-redux-firebase

Using Node.js to write data to a JSON file

Currently, I am working on a program that scans through an array containing numerous links. It reads through each link, extracts specific text, and then stores it in an output file as JSON. However, I am facing an issue with formatting the JSON file. The ...

javascriptjsonnode.jsweb

Implementing child components in React using TypeScript and passing them as props

Is it possible to append content to a parent component in React by passing it through props? For example: function MyComponent(props: IMyProps) { return ( {<props.parent>}{myStuff}{</props.parent>} } Would it be feasible to use the new compone ...

javascriptreactjstypescriptnext.js

NgbHighlight now allows for one highlight element per line

I am currently utilizing NgbHighlight to allow users to search within a list. However, I am facing an issue with the highlighting of search results. My intention is to highlight only the first match in the list. I am sticking to the basic implementation ...

javascriptangularng-bootstrap

Issue with next() middleware function when using token-based authentication

Currently, I am working on an account registration feature that involves email authentication. The process includes sending a token via the URL, extracting the token using useParams, and then passing it to the backend for user account validation. Unfortun ...

node.jsreactjsexpressmiddleware

The vertical shift in one of the inline table cell DIVs is being caused by two of them

I've been searching for a solution to my issue, but have come up empty-handed. I apologize if this has already been discussed before. My HTML page contains a section that appears as follows: <div id=wrap> <div id=lb> Content ...

htmlcsscss-tables

Struggling with parameter passing issues and preparing code for seamless integration with MYSQL database

I've been dedicating the past four days to a project that I've crafted entirely by hand to test my JavaScript skills as I progress through Codecademy courses. The goal is to develop a browser-based checklist program, and so far, I've success ...

javascriptjquerymysqlparameter-passing

bypassing files in mongodb for paging purposes

I need to retrieve specific documents based on the page count parameter in my GET request. For instance, when I send a GET request to http://localhost:3001/posts?page=2, I want to receive 10 documents per page starting from document 10 to 20. router/posts ...

node.jsreactjsmongodbexpressmongoose

Choosing from a variety of tr elements

I'm working with a table in HTML that has about 100 rows. I would like to apply different colors to specific groups of rows, such as making rows 1-10 red and rows 20-40 blue. Using nth-child seems like an option, but it can get quite verbose if I nee ...

javascriptjqueryhtmlcss

Disabling the authentication prompt in the browser

Apologies for the repetition, but I would like to pose a more general question. Is there any method on the client side of a web application to predict if requesting a resource will result in a 401 status code and trigger an unattractive authentication pro ...

javascriptflashhttp-authenticationsuppress

Adjustable textarea with automatic height based on content and line breaks

Imagine you have a textarea with text that includes line breaks. If you style it like this: textarea { height: auto; overflow: hidden; resize: none; } Upon loading the page, the textarea will only adjust its height based on the content until it enc ...

javascripthtmlcss

Trigger the datepicker to open by clicking anywhere within the TextField in MUI

I am trying to enhance my date picker functionality by displaying it when users click anywhere within the field, not just on the calendar icon. Below is the picker: https://i.stack.imgur.com/mrAui.png export function DatePickerField(props) { ...... ...

cssreactjsmaterial-uiweb-frontend

What is the best way to utilize an Angular service method from a controller?

As a newcomer to Angular, I have created an 'Employee Search' Service module. Let's take a look at the code: // Employee Search Service app.service('employeeSearchService', function($http, resourceServerAddress){ this.empList ...

javascriptangularjsangular-services

jQuery Files in Conflict

The issue I am facing involves the code below. The first function requires linked js and css, while the second one needs a jQuery and javascript file inherited from base.html. However, there seems to be a conflict in loading these files (possibly because o ...

javascriptjqueryhtmldjango

props remain undefined even after being assigned in the redux store

I encountered an unusual error related to a reducer called prs when adding or deleting a person in an app. Essentially, this app allows users to add or remove a person with a unique ID assigned to each individual. To start off, here is the parent componen ...

javascriptreactjsreduxreact-redux