Style or Css Missing on Reload

[MarkGersaliaPH]

Good day, Im using react and Inertia for my app..

react-form-stepper seems losing its style when the inertia reloads.

This is the screen shot before..

This is what happens, after.

do you have any Idea?

Thank you in advance.

Regards

[willpiam]

I have the same issue

[kalaivanysupramany794]

I'm also facing the same issue..did you find solution?TIA

[MarkGersaliaPH]

I didn't fix it, as I remember I just used manual css

[jlfabi]

I am having the same issue

[guilherme-oliveira-trybe]

for me resolved when i used this (in the docs):

Using with SSR
When developing an SSR application with a framework like Next.js you might face your console being polluted with the following message Warning: [JSS] Rule is not linked. Missing sheet option "link: true". caused by the underlying dependency react-jss. A workaround is to use the dynamic import module like in the example below.

example:

//StepperProgress.tsx

import { Stepper } from 'react-form-stepper'
import { StepperProps } from 'react-form-stepper/dist/components/Stepper/StepperTypes'

const StepperProgress = ({ steps, activeStep, ...props }: StepperProps) => {
  return <Stepper steps={steps} activeStep={activeStep} {...props} />
}

export default StepperProgress

//index.ts

import dynamic from 'next/dynamic'

export const StepperComponent = dynamic(() => import('./StepperProgress'), {
  ssr: false,
})

[happymango7]

Same issue for me, any workaround??

[TamasNo1]

I had this issue too, my solution was to add the following 3 classes to my global CSS in my Recat app (I'm using styled-components):

main.jsx

...

export const GlobalStyle = createGlobalStyle`

  ...

  [class*='StepButtonContent-'] {
    color: rgb(21, 21, 21);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
  }
  [class*='ConnectorContainer-'] {
    top: calc(1em - 1px);
    left: calc(-50% + 2em - 8px);
    right: calc(50% + 2em - 8px);
    position: absolute;
  }
  [class*='Connector-'] {
    display: block;
    border-color: rgb(21, 21, 21);
    border-top-style: solid;
    border-top-width: 2px;
  }
`

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <App />
    </ThemeProvider>
  </StrictMode>,
);