React-select 元素被赋予“css-hash”classNamePrefixes

Question

我一直在尝试自定义 React-select 元素，但它们都得到了这些“css-xxx”前缀： class="user-select css-b62m3t-container"

我不知道那是从哪里来的（可能是 Next.js），我被要求使用类而不是使用那些哈希来修改这些元素。 我试过这个（用户选择是我的 AsyncSelect 类名）：

.user-select {
    .control {
        border-radius: 0.375rem !important;
        border: 1px solid #d2ddec;
    }
    .control:focus {
        border-radius: 0.375rem !important;
        border: 1px solid #d2ddec;
    }
}

这也是：

.user-select {
    &__control {
        border-radius: 0.375rem !important;
        border: 1px solid #d2ddec;
    &--is-focused {
    border-radius: 0.375rem !important;
        border: 1px solid #d2ddec;
    }
}

如此处所述如何设置反应选择选项的样式，但除了在我的 scss 文件中提供“css-hash” class 名称之外，我还没有设法修改这些 css 属性。

如果你们能帮助我了解这些哈希的来源以及我做错了什么，我将不胜感激。

提前致谢 ！

Answer 1

那些 hash 类是由 @emotion 创建的 CSS-in-JS 类，是核心库的一部分。 您可以使用样式覆盖函数来创建附加组件styles或将附加类添加到各个组件。