Problem: I am using styled components from '@mui/styles'. It kept generating new CSS after I added a pseudo element (::before) to the Container. If I would like to use styled components from material ui. How can I fix it? thank you.

import { Box, Theme } from '@mui/material'
import { styled } from '@mui/styles'

export const Container = styled(Box)(({ theme }: { theme: Theme }) => ({
  position: 'relative',
  width: '100%',
  maxWidth: '640px',
  margin: '0 auto',
  padding: '24px 24px 32px 24px',
  borderRadius: '20px',
  boxShadow:
    '0px 0px 20px -10px rgba(255, 255, 255, 0.5), 0px 30px 80px -60px #0c58ff, 0px 100px 180px -100px #00ff57',

  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background:
      'radial-gradient(22.65% 3.56% at 50% 23.63%, #0050FF 0%, rgba(6, 45, 130, 0.511368) 63.46%, rgba(6, 45, 130, 0) 100%), linear-gradient(119.51deg, #0E0F28 19.73%, #000113 100%)',
  }}))

non-stop generating new CSS