typescript - Automatisert måte å legge til Material UI-prefiks til styled components


Hei, jeg bruker styled components og material-ui med en tilpasset prefiks for material-ui-klasser. Men i stilfilene mine er jeg nødt til å importere den prefiksen og legge den foran navnet på material-ui-klassen manuelt. Finnes det en måte å automatisere dette på i hele applikasjonen, slik at jeg ikke trenger å legge til muiPrefix manuelt foran klassen?

Slik bruker jeg prefikset

MUI-temaleverandør omslutter leverandør av stiliserte komponenter

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

export const generateClassPrefix = (prefix: string) =>
  createGenerateClassName({
    seed: prefix,
  });


Eksempel stilfil

export const muiPrefix = 'my-prefix';
import { muiPrefix } from ...

const Button = styled(MuiButton)<StylesProps>`
  &.${muiPrefix}-MuiButton-root {
    pointer-events: ${({ $loading }) => {
      return $loading ? 'none' : 'auto';
    }};
  }
}