Sample on how CSS Modules works.

Module.jsx

import * as React from 'react';

import styles from './style.module.css';

export default function Container({ children, as = 'div', ...props }) {
  const Component = as;

  const style = styles.container + ' ' + props.styles;

  return (
    <Component className={style} {...props}>
      <div className={styles.wrapper}>{children}</div>
    </Component>
  );
}

For usage check this

You notice that it takes the Component's name and appends some template literal which is randomly generated to prevent clashes when you reuse it.