在下一个 js sass 模块中覆盖内联 CSS

Question

我使用 Twemoji 库在我的 Next js 应用程序中获取表情符号图标，它们在最终 HTML 中显示为 <span><img></span>，我可以在我的 globals.scss 文件中使用 !important 覆盖它们的默认宽度和高度：

.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;
      }
    }
  }

然后我尝试将其提取为[].module.scss 文件，一切正常，但图像大小没有任何变化。为什么？

编辑 这是我要设置样式的组件：

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

Answer 1

在您尝试提取的任何位置之前使用此代码

$(document).ready(function () {  
  // Set the size of the rendered Emojis
  // This can be set to 16x16, 36x36, or 72x72
  twemoji.size = '36x36';

});