Question

Views

I'm using react-simple-keyboard and I try to override below style 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

However, I've found there's no update on the style.

I've tried something like

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

but still not working
How can I do it?

about 4 years ago · Juan Pablo Isaza

Answer question

Answer 1 · 2022-07-03T07:14:20.189Z

I don't think you are using the CSS modules correctly. The way you do it is like this:

whatever.module.css

.something {
  color: red;
}

some.tsx

import styles from "./whatever.module.css"
<Component className={styles.something}/>

The fact that you are using dashes ("-") makes me think that you don't use this properly, as you can't use dashes in an object property name.

If you did apply the styles correctly, and it still doesn't work, try using this class in the global css file - .simple-keyboard