在 Svelte Material UI Autocomplete 上设置输入宽度

Question

我正在使用这个库： https://sveltematerialui.com在 Svelte 中呈现一个自动完成组件。

我需要设置输入宽度的样式。 我已经能够直接在组件内联上附加样式。

但是，这只会将 with 应用于父 div 而不是子输入。

这是我为重现该问题而创建的 REPEL： https://svelte.dev/repl/12db54ca23fc497685adf82cafe73bf6?version=3.53.1

这个库应该基于 Material UI。 可能有一种 Material UI 方式来设置输入的样式。

Answer 1

简单的 CSS 覆盖怎么样？

...
<style>
    .mdc-text-field__input {
        width: 200px;
    }
</style>

Answer 2

Svelte 将额外的字符附加到类中，以避免不同组件之间的样式冲突。 :global() 将覆盖 Svelte 编译器的这个特性。 如果将 the:global() 嵌套在放置在父 div 上的 class 中，则可以避免将 CSS 选择器暴露在该 Svelte 组件之外。

.columnsmargins {
            :global(.mdc-text-field__input){
            width: 600px !important; 
    }
}