Question

我正在使用Svelte和材料设计库 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 。您会看到一些可能有用的道具。

不是，请先阅读smelte select code并寻找道具，然后再让眼睛进一步阅读

（关键字：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默认值的覆盖，但是从父组件的角度来看：

<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" />

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

与往常一样，引用依赖项的源代码以查看它们真正具有的功能超级有帮助。精巧的组件，具有直截了当的语法，绝不会给您提供很好的机会来练习代码阅读，以寻找可以利用的道具。

友好的提示：

您的问题，“我如何删除Smelte.js生成的多余CSS类？” 没有描述您要做什么。它不描述您的问题。您的标题描述了您的思考过程。它描述了您建议的解决方案。*
当您开始使用该组件并遇到问题时，您脑海中的第一个念头不是，“嘿，我这里的CSS特别多！我该如何解决？”，
相反，您看着屏幕说：“嘿，我的眼睛告诉我，这两件事之间的间距不正确！我希望它们在垂直方向上靠得更近。我必须更改这些内容的顶部和底部填充。如何更改其填充？
“如何更改smeltejs组件的边距或填充？”描述您要解决的问题
只是花了很多时间来撰写有关如何检查CSS树摇是否有效以及如何进行配置的答案。我刚刚删除了60分钟的工作和验证，并增加了30分钟，以便为您提供通用的斯威夫特方法
摘要：提出问题，而不是解决方案。希望这也有帮助！？

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

1 个答案: