Next js - not able to override the styles from component library using scss

Question

This post is originated from the post

I'm using react-simple-keyboard and I try to override below style(class:react-simple-keyboard) from this library

by using scss

keyboard.module.scss

.react-simple-keyboard{
  width: 50% !important;
}

components/keyboard/index.js

import keyboardStyle from "./keyboard.module.scss";
...
// Do something using keyboardStyle

but not working

From the comments I've got from the post, I even try

:global(.react-simple-keyboard) {
  width: 50% !important;
}

but not working.

It throws error

 Selector ":global(.react-simple-keyboard)" is not pure (pure selectors must contain at least one local class or id)

Update 1
I try to add the class to global.css and it works, just wondering if I can do it in keyboard.module.scss

_app.tsx

import "../styles/globals.css";
...