Click here to Skip to main content
14,883,493 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900