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

问题描述

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

.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

解决方法

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

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

});

css-modules html