CSS modules

CSS modules offer a good solution for managing component styles within React applications, and is the recommended styling solution for Mantine.

All CSS modules must live next to the component that they support and should follow the naming scheme of component-name.module.css.

Class names within the modules must follow BEM (https://getbem.com/naming/), where a “block” would represent the component itself.

Example

nav-drawer.module.css

.nav-drawer__container {
  display: 'flex';
  flex-direction: 'column';
}

.nav-drawer__button {
  margin-bottom: 1rem;
}

.nav-drawer__footer {
  display: 'flex';
  flex-direction: 'column';
  position: 'fixed';
  left: 1rem;
  right: 1rem;
  bottom: 0;
}

nav-drawer.tsx

export type NavDrawerProps = DrawerProps & {
  links: Array<MainLinkProps>;
  buttons: Array<ButtonProps>;
};

export const NavDrawer = ({ links, buttons, ...otherProps }: NavDrawerProps) => (
  <Drawer {...otherProps}>
    <Logo />
    <div className={classes['nav-drawer__container']}>
      {links.map((link) => (
        <MainLink {...link} key={link.label} />
      ))}
    </div>
    <div className={classes['nav-drawer__footer']}>
      {buttons.map((button, index) => (
        // eslint-disable-next-line react/no-array-index-key
        <Button key={index} {...button} className={classes['nav-drawer__button']} />
      ))}
    </div>
  </Drawer>
);