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';
}};
}
}