jss | Software development kit for JavaScript developers building | Server Side Rendering library

I'm making this site using Next.JS hosted @ Vercel. One of the packages I'm using is a custom one that I've forked, updated it in my project and after the build, was able to make it work locally. I posted a question here about it.

However, deploy is failing on Vercel's side with a message complaining that that same custom module I'm using couldn't be found. Everything works fine locally.

It seems like the "way to go" for setting up Next.js and MUI is to remove the server-side styling, so I did it in _app.tsx

Inside a design system I maintain, we use a modified BEM format for the naming of exported @emotion/css JSS styles.

The syntax looks something like this:

Note that this is for MUI v5 @mui/material and NOT using v4 @material-ui/core

After finally figuring out how to make @mui/material styles show when using an entry point to emotion to insert scoped shadow DOM styles (see this post How to create insertion point to mount styles in shadow dom for MUI material v5 in React custom element), it turns out the Select drop down is not getting styled correctly for the Demo component which contains the @mui/material components.

Here is the stackblitz https://stackblitz.com/edit/react-d8xtdu-s2cufr?file=demo.js

Using @material-ui/core V4(4.12.3 to be exact) I HAD a custom element created successfully using webpack and babel. I used to be styling it using the @material-ui/core makeStyles. Now I am upgrading to @mui/material v5 and want to use the built-in components from @mui/material but they do not display styled within the custom element. Please note that I need this to be a custom element as it will be integrated within another hosting app.

index.tsx BEFORE in v4

Previously, in Material-UI v4, I had this bit of code

I am a beginner to learn about React. I tried to follow up on one Udemy lecture but my searchbox didn't work as well even though I rewrite the code three times... Could you check this code why my searchbox didn't work? If I type some words in searchbox, it should show matched cards(write down name on search box and it shows a matched card)

I will share my code bellow

This is index.js

i am useing Material UI 5 with next.js and have implemenmted every steps exactly like the documentation here with emotion and stylis-plugin-rtl v2: https://next.material-ui.com/guides/right-to-left/#heading-jss but after refreshing page my label in input jumping to left and by clicking goes right and in outlined mode label placement in border is ltr can anyone help?

I added the (from react-planet) to my App and the placement of some (from the Material UI) components changed.

While looking inside "Elements" in DevTool I noticed that divs inside the component have two classes jss3 and jss{i} where i is the next integral number. Each has different properties inside which overwrites every component in App that is using one of the jss{i} classes.

I also noticed that at first render i iteration, which applies to jss{i} used in newly created divs, starts from 1 and ends at 9 - because I have 6 planets so 1 for the main div, 2 for the central planet, 3 for divs' first class, and 4-9 for the six divs' second class. After the second render number goes from 10 to 18.

Screenshots of Elements at first render and second.

The class ={jss3 jss4} example

The class ={jss3 jss5} example

I assume that after creating planets by , whose children have two classes, the newly created class jss{i}, based on makeStyles-root-{i}, is overwriting properties of jss{i}, which is used somewhere else on page by components thus changing placement for the whole page.

Code where component is used: