How does CSS Modules cascade work? Some styles from props aren't applied

Question

I'm having some issues with CSS Modules in the way how the resulting files are loaded when accessing a page (it's a Next JS project).

I have a Button component in src/components/Button which has its own css module file. In a page component I have another component that's using the Button component.

In this component the button needs to have additional styles so I pass these styles per props. i.e: the text has to be bigger

<Button className={styles.bigText} />

In the Button component I do this:

import classnames from 'classnames'
import styles from './styles.module.css'

function Button({ children, className }) {
  const classes = classnames(styles.button, className);

  return <Button className={classes}>{ children }</Button>
}

When the page reloads I see the button rendered with the font-size defined in the Button's styles file and bigText appears overwritten, so it's not applied.

I tried to use composes for importing the class button from Button's style file but still the font-size applied is the value set in the .button class.

.bigText {
  composes: button import './path/to/button/styles';
  font-size: 32px;
}

The className prop in Button component is replaced to use the className prop I pass it

function Button({ children, className }) {
  return <Button className={className}>{ children }</Button>
}