Why CSS-Modules is affecting globally when working with html elements?

Question

I have a file mycomponent.module.css

button {
    width: 10vw;
    min-width: 150px;
}

Unfortunately this css is affecting globally instead of the specific component where I am importing it. Does CSS modules not work on element names and only works on class-names? So .button instead of button?

Answer 1

Write like this.

Make a Class or ID and call them where is needed.

.bu{
    width: 10vw;
    min-width: 150px;
    background-color:red;
}

<button class="bu">button1 </button><br><br>
<button>button2 ! </button>