Overriding inline CSS in next js sass module

See more:

Javascript

CSS3

SASS

ReactJS

I use the `Twemoji` library to get emoji icons in my Next js App, they appear as

<span><img></span>

in the final HTML and I can override their default width and height using

!important

in my globals.scss file:

.customize { //Parent class containers 3 buttons, each one has an emoji element
        top: 88%;
        right: calc(50vw - (52.2px + 3rem));
        button {
          span img[style]{
            width: 35px !important;
            height: 35px !important;
          }
        }
      }

Then I tried to extract it as a `[].module.scss` file, to style this component:

import ThemeButton from '../components/themeCustomizeButton' // a button that renders an emoji
    import LanguageSwitcher from '../components/LanguageSwitch' // a button that renders an emoji
    import Complex from '../components/ComplexitySwitch' // a button that renders an emoji
    import styles from "../styles/local/components/customize.module.scss" // importing .module.scss
    
    function Customizing() {
        return(
            <section className={styles.customize}>
                <ThemeButton />
                <LanguageSwitcher />
                <Complex />
            </section>
        )
    }
    
    export default Customizing

other properties except for the image's width and height works. the emojis are 16 * 16 only, why?

What I have tried:

I tried extracting the scss module, rename it and re-import It multiple times. I also compiled it manually and re-imported it again with no luck.
I'm testing the webpage using Firefox.