set input width on Svelte Material UI Autocomplete

Question

I am using this library: https://sveltematerialui.com to render an autocomplete component in Svelte.

I need to style the width of the input. I have been able to attach a style directly on the component inline.

However this will only apply the with to the parent div and not the child input.

Here is a REPEL I created to reproduce the issue: https://svelte.dev/repl/12db54ca23fc497685adf82cafe73bf6?version=3.53.1

This library should be based on Material UI. It's possible that there is a Material UI way to style the input.

Answer 1

How about simple CSS override?

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

Answer 2

Svelte appends additional characters to classes to avoid style collisions between different components. :global() will override this feature of the Svelte compiler. If you nest the:global() within a class placed on the parent div, you can avoid exposing that CSS selector outside of that Svelte component.

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