为什么 CSS-Modules 在使用 html 元素时会全局影响？

Question

我有一个文件mycomponent.module.css

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

不幸的是，这个 css 影响的是全局，而不是我导入它的特定组件。 CSS 模块是否不适用于元素名称而仅适用于 class-名称？所以 .button 而不是 button?

Answer 1

如果您想为当前按钮设置样式，您应该为您的按钮指定一个类名或 ID。在这种情况下，它是全局的，适用于所有按钮。

Answer 2

这样写

制作一个Class或ID并在需要的地方调用它们。

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

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

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