Class name prop not overriding component styles

[Konglomneshued]

Edit: I've pasted the code for the right component now.

My question is how do I do this:

// Example case; my actual case is a button
// Just easier to show what I want to do in one place
// Since I have nested components
...
<ul className={`
   ${styles.listDefaults}
   ${customStyles}
`}>
...

and have customStyles override styles.listDefaults?

An Icon Button component

import type { CSS_Class } from 'types/cssTypes';

import { Button } from 'components/button';

interface Props {
   name: string;
   iconPath: string;
   buttonStyles?: CSS_Class;
   iconStyles: CSS_Class;
}

export const IconButton = ({ name, iconPath, buttonStyles = '', iconStyles }: Props) => {
   return (
      <Button
         customStyles={buttonStyles}
      >
         <img
            className={iconStyles}
            src={iconPath}
            alt={name}
         />
      </Button>
   );
};

New Tab Button (an Icon Button) component styles

.newTabButton {
   padding: 0.4em;
   border-radius: 0.25em;
}

.newTabButton:focus,
.newTabButton:hover {
   background: var(--highlight);
}

.newTabButton:active {
   background: var(--selected);
}

.plusIcon {
   filter: var(--iconColor);

   width: 1em;
}

The Button component

import type { ReactNode } from 'react';

import type { CSS_Class } from 'types/cssTypes';

import styles from './Button.module.scss';

interface Props {
   customStyles?: CSS_Class;
   children?: ReactNode;
}

export const Button = ({ customStyles = '', children }: Props) => {
   return (
      <button className={`
         ${styles.buttonDefaults}
         ${customStyles}
      `}>
         {children}
      </button>
   );
};

Button component styles

.buttonDefaults {
   color: inherit;

   background: 0;
   padding: 0;
   border: 0;
}

My Design in HTML & CSS

My result when I make the component in React

[frontend-sensei]

Hi @Konglomneshued !
Did you figured out your issue?

[Konglomneshued]

Hi @Konglomneshued ! Did you figured out your issue?

I did not. It's a known issue with CSS modules and there is only a workaround, unfortunately, which is to increase the specificity of the class you wish to have priority by repeating it:

.newTabButton.newTabButton

[frontend-sensei]

Ohh, I see. Unfortunately, I took the same solution.
Thanks for reply.

[receter]

Hi I just wrote an article about this exact topic, maybe it helps you understand the issue in more depth: https://dev.to/receter/avoiding-css-order-of-appearance-problems-with-css-modules-3j7p

Cheers!