Css module cannot override a style from another css module

Question

I have created a React Component that uses css modules.

I have a Logo component:

import * as React from 'react';

import * as styles from './Logo.module.scss';
import appLogo from "../../assets/logo.png";


interface ILogoProps {
  logo?: object,
  alt?: string,
  externalStyle?: Object
}

export const MyLogo = ({logo, alt, externalStyle} : ILogoProps ):
  React.ReactElement<ILogoProps > => {
  const defaultLogo = logo? logo : appLogo;
  const defaultAlt = alt? alt : 'MY Logo';

  return (
      <div className={[styles.logo, externalStyle].join(' ')} >
        <img src={defaultLogo} alt={defaultAlt}/>
      </div>
  );
};

export default MyLogo;

.logo{
  height: 40px;
  background-color: rgba(255,255,255,0.01);
}

I am trying to override the defult background color for the logo by passing in External styles

.test{
  background-color: #721c24;
  height: 100px;
}

But the css modules that i pass in externally is not able to override the local css of the Logo component.

Note

I have read across several Stackoverflow posts that this is not possible as the Local Css modules cannot be overidden.

By using important in the overriding style it works, but that dosent feel right to me.

Is there any other solution apart from this?

I don't think it has anything to do with `css modules`. The rule with higher css specificity will be applied. If you want `.test` class to override `.logo`, try making it more specific. — Prakash Sharma, Aug 04 '19 at 08:33
@PrakashSharma can you be more specific i have added the css to the question but what more specific things am i missing here — Rahul Singh, Aug 04 '19 at 08:36
You can read about css specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — Prakash Sharma, Aug 04 '19 at 08:39
@PrakashSharma i have followed this already i don't think you get the context here. I am adding the css classes preceding the default styles — Rahul Singh, Aug 04 '19 at 08:41
@PrakashSharma also refer to this question - https://stackoverflow.com/questions/42587507/css-modules-referencing-classes-from-other-modules — Rahul Singh, Aug 04 '19 at 08:42
After reading the answer you linked, I would still say that in you case it is css specificity issue. You are doing it right. All you need to do is to make .`test` class higher specific so that it can overrider the `.logo` class. It is not `css module` issue. It is just the normal css rule. — Prakash Sharma, Aug 04 '19 at 08:52
The statement `Local Css modules cannot be overidden` mean that if you have same class name in two different modules then they will be considered totally different class by `css modules`. So one class cannot override other even if they have same name but in different modules. So that stament is not applicable in your case. — Prakash Sharma, Aug 04 '19 at 08:54
Ohh okay that were i am confusing , but why dosent it still work can you post an answer for this @PrakashSharma — Rahul Singh, Aug 04 '19 at 09:27

score 0 · Answer 1 · answered Mar 09 '22 at 19:18

0

Using :global(.classname) you can override the external classnames.

Even 3rd party library css can be override.

:global(.test) {
  background-color: #721c24;
  height: 100px;
}

answered Mar 09 '22 at 19:18

Vikrant Thete

61
2

any other way to do this? – Ozan Mudul May 07 '23 at 23:40

score -1 · Answer 2 · answered Aug 04 '19 at 08:35

-1

If your external css rules will be more specific it will also work. So for example if you add a parent container to a rule and then the element, it will override the less specific rule with onlly the css element rule.

.element { /* your styles */ }

.parentelement .element { /* will override element styles /* }

answered Aug 04 '19 at 08:35

niklas

2,887
3
38
70

1

Okay @niklas i get that and i works but one thing is why do i need to do this thing is it kind of a workaround to this problem with css modules ? – Rahul Singh Aug 04 '19 at 08:47

Css module cannot override a style from another css module

2 Answers2