如何删除 Smelte.js 生成的多余 CSS 类？

Question

我正在使用 Svelte 和 material 设计库进行一个项目 Smelte:

<script>

const currency = [
    { value: 1, text: "EUR" },
    { value: 2, text: "GBP" },
    { value: 3, text: "USD" }];

</script>

<Smelte.Select label="Currency" class="bg-transparent inline-block">
    <div slot="options" class="elevation-1">
        {#each items as item}
            <div class="p-2">{item.text}</div>
        {/each}
    </div>
</Smelte.Select>

问题是 Smelte 生成了很多 HTML 元素，并在其中添加了很多类我不需要的元素：

<div class="mt-0 relative text-gray-600 dark:text-gray-100 select ">
  <label class="absolute top-0 label-transition block px-4 pointer-events-none cursor-text svelte-81hn54" bgcolor="white">EUR</label> <input readonly="" class="transition   px-4 -t text-black dark:text-gray-100 w-full border  bg-transparent  transition  caret-primary-500   border-gray-600  border-l-0 border-t-0 border-r-0 pb-1  cursor-pointer  transition   px-4 -t text-black dark:text-gray-100 w-full border  bg-transparent  transition  caret-primary-500   border-gray-600  border-l-0 border-t-0 border-r-0 pb-1  cursor-pointer"> 
  <div class="absolute right-0 top-0 pb-2 pr-4 pt-4 text-gray-700 z-10"><i aria-hidden="true" class="material-icons icon text-xl transition svelte-zzky5a" style="color: default">arrow_drop_down</i></div>
  <div class="line absolute bottom-0 left-0 w-full bg-gray-600 svelte-xd9zs6 hidden">
    <div class="mx-auto w-0 svelte-xd9zs6" style="height: 2px; transition: width 0.2s ease 0s;"></div>
  </div>
</div>

我希望我有 <div class="absolute right-0 top-0 pr-4 z-10"> 而不是 <div class="absolute right-0 top-0 pb-2 pr-4 pt-4 text-gray-700 z-10">。

我怎样才能达到预期的结果（不对 node_modules 进行更改）？

Answer 1

看看source of the select smelte component。您会看到一些可能有用的道具。

No really, go read the smelte select code and look for the props before allowing your eyes to read further

(keyphrase:export let)

这是描述组件类的道具：

  export let classes = classesDefault;
  export let optionsClasses = optionsClassesDefault;

select的默认值描述如下

  const optionsClassesDefault = "absolute left-0 bg-white rounded elevation-3 w-full z-20 dark:bg-dark-500";
  const classesDefault = "cursor-pointer relative pb-4";

所以，这里是用那些非常相同的默认值覆盖 const 默认值，但是从 parent 组件的角度来看：

<script>
    import { Select } from "smelte";

    const items = [
    { value: 1, text: "One" },
    { value: 2, text: "Two" },
    { value: 3, text: "Three" },
    { value: 4, text: "Four" },
    ];
</script>

<Select label="My Select List" {items} classes="cursor-pointer relative pb-4" optionsClasses="absolute left-0 bg-white rounded elevation-3 w-full z-20 dark:bg-dark-500" />

您可以根据自己的规格调整此想法。让我知道这是否适合您！

一如既往，参考依赖项的源代码以了解它们的真正功能非常有帮助。精巧的组件，鉴于其直截了当的语法 总是提供很好的练习机会code-reading 以寻找您可以利用的道具。

友情提示:

您的问题，“我怎样才能去除 Smelte.js 产生的多余 CSS 类？” 没有描述你想做什么。它没有描述您的问题。您的头衔描述了您的 thought-process。它描述了您提出的解决方案。*
当您开始处理组件并运行解决您的问题时，您脑海中的第一个想法不是, "嘿，我这里 CSS 特别多！我该如何解决？",
相反，你看着屏幕说，“嘿，我的眼睛告诉我这两个东西之间的间距不对！我希望它们更近一些垂直在一起。我必须更改这些的顶部和底部填充。如何更改它的填充？
“如何更改 smeltejs 组件的边距或填充？”更好地描述了您要解决的问题
刚刚花了很多时间写一个关于如何检查 CSS tree-shaking 是否正常工作以及如果不正常时如何配置它的答案'吨。我刚刚删除了 60 分钟的工作和验证，并增加了 30 分钟来为您提供常见的 sveltian 方法
总结：提出问题，而不是解决方案。希望这也有帮助！？

如何删除 Smelte.js 生成的多余 CSS 类？

How can I remove the excess CSS classes that Smelte.js generates?

javascript

svelte