Svelte Material UI Autocomplete输入框宽度设置问题

由于Svelte Material UI（SMUI）的Autocomplete组件会封装内部DOM结构，直接给组件加内联样式只会作用于外层容器，无法影响内部的输入框。可以用以下两种方法解决：

方法1：通过CSS选择器穿透设置样式 #

给Autocomplete组件添加自定义类名，然后使用:global()选择器选中内部输入元素来设置宽度：

<script>
  import { Autocomplete } from '@smui/autocomplete';
</script>

<Autocomplete class="custom-auto" options={['选项1', '选项2', '选项3']} />

<style>
  .custom-auto :global(input) {
    width: 350px; /* 替换为你需要的宽度 */
  }
</style>

方法2：利用组件的inputProps传递样式 #

SMUI的Autocomplete支持通过inputProps属性，直接把样式传递给内部的输入框组件：

<script>
  import { Autocomplete } from '@smui/autocomplete';
</script>

<Autocomplete 
  options={['选项1', '选项2', '选项3']}
  inputProps={{ style: { width: '350px' } }}
/>

第一种方法适合需要批量设置样式或者配合其他CSS规则的场景，第二种更适合快速内联设置单个组件的样式，两者都能直接作用到内部的输入框元素。

内容的提问来源于stack exchange，提问作者Paul VanDyke