reactjs - Migrering från CRA till Vite bryter stilar

Jag migrerar mitt projekt från CRA till Vite och Typescript, det använder Material UI version 4 som komponentbibliotek. Problemet är att när jag nu kör projektet appliceras inte stilarna på komponenten, men om jag trycker cmd + s i VS Code på den komponentfilen, laddar Vite om och nu fungerar stilen. Vad kan det vara? Jag antar att det är någon konfiguration jag saknar.

Detta är ett komponentexempel med detta beteende:

import React from 'react'
import clsx from 'clsx'
import { Button as ButtonMaterial, CircularProgress } from '@material-ui/core'

import { sharedPalette } from '@support/theme-provider/themes/shared'
import useStyles from './Button.styles'

const Button = props => {
  const {
    className,
    children,
    color,
    disabled,
    href,
    onClick,
    loading,
    size,
    variant,
    loaderColor,
    ...rest
  } = props
  const classes = useStyles({ color, disabled, size, variant })

  return (
    <ButtonMaterial
      classes={{ root: clsx(classes.root, classes.themeColor) }}
      className={className}
      disabled={disabled || loading}
      href={href}
      onClick={onClick}
      size={size}
      variant={variant}
      {...rest}
    >
      {loading ? <CircularProgress size={20} style={{ color: loaderColor }} /> : children}
    </ButtonMaterial>
  )
}

export default Button

I det här fallet tillämpas varken classes eller className prop-stilarna på komponenten förrän jag trycker på spara i filen och Vite laddar om.

Detta är min vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import dns from 'dns'

dns.setDefaultResultOrder('verbatim')

export default defineConfig({
  plugins: [react()],
  server: {
    host: 'localhost',
    port: 3000
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  }
})

Så här såg det ut tidigare, men nu finns ingen av dessa stilar i elementet.