3

Hello I'm using styled components and material-ui with custom prefix for material ui classes. However on my styles files I'm forced to import that prefix and before the name of material-ui class manually. Is there any way to automate it across entire application, so I don't have to add muiPrefix manually to before the class ?

This is how I'm using prefix

MUI theme provider wraps styled components provider

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

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


Example styles file

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

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

Verthon
  • 2,937
  • 3
  • 20
  • 32

0 Answers0