Как я могу удалить лишние CSS классы, генерируемые Smelte. js? - PullRequest
Новая
       6

Как я могу удалить лишние CSS классы, генерируемые Smelte. js?

0 голосов
/ 18 июня 2020

Я работаю над проектом с 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>

I wi sh У меня было <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)?

1 Ответ

2 голосов
/ 22 июня 2020

взгляните на источник select smelte component . Вы увидите несколько реквизитов, которые могут помочь.

Нет, на самом деле go прочтите smelte select код и поищите реквизит, прежде чем позволить своим глазам читать дальше

(ключевая фраза: 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" />

Вы можете адаптировать эту идею к вашим требованиям. Сообщите мне, работает ли это для вас!

Как всегда, очень полезно обратиться к исходному коду ваших зависимостей, чтобы увидеть, на что они действительно способны. Компоненты Svelte, с их прямым синтаксисом , всегда предоставляют хорошие возможности попрактиковаться в чтении кода, чтобы найти возможности, которые вы можете использовать.

Дружественный совет :

  • Ваш вопрос: «Как мне удалить лишние CSS классы, которые создает Smelte. js?» не опишите, что вы пытаетесь сделать. Это не описывает вашу проблему. Ваш заголовок описывает ваш мыслительный процесс. В нем описывается предлагаемое вами решение. *

  • Когда вы начали работать над компонентом и столкнулись со своей проблемой, самой первой мыслью в вашей голове не было, «Эй, у меня здесь конкретно чрезмерное количество CSS! Как это исправить?»,

  • вместо этого вы посмотрели на экран и сказали: «Эй, мои глаза говорят мне, что расстояние между этими двумя объектами неправильное! Я бы хотел, чтобы они были ближе друг к другу по вертикали. Мне нужно изменить верхнее и нижнее отступы на них. Как мне изменить отступы?

  • «Как изменить поля или заполнение компонента smelte js?» - немного лучше описывает проблему, которую вы пытаетесь решить

  • Просто потратил много времени на написание ответа о том, как проверить, работает ли CSS tree-shaking, и как его настроить, если это не так. I просто удалил 60 минут работы и проверки на это и добавил еще 30 минут, чтобы дать вам общий sveltian метод

  • сводка: задавайте вопросы, а не решения. Надеюсь, это тоже поможет!?

...