Feliz: Добавление строковых перегрузок в свойства CSS для необработанных пользовательских значений

Созданный на 11 нояб. 2019  ·  15Комментарии  ·  Источник: Zaid-Ajaj/Feliz

Наконец-то удалось больше поиграть с самим Фелизом. Заметил несколько вещей, которые следует / можно изменить:

Некоторые свойства слишком строгие. Например, если я использую Material-UI и хочу установить box-shadow я не могу установить его через boxShadow поскольку перегрузки принимают только кортежи int и int. MaterialUI theme.shadows - это массив строк, и его общее использование выглядит следующим образом:

Styles.create [ style.custom ("box-shadow", (theme.shadows.[5])) ]

Я не уверен, нужно ли это настраивать, чтобы все свойства стиля могли принимать строку или просто заставляли их делать style.custom при выполнении такой настройки. @cmeeren мысли?

Я также заметил, что outline и justify-content полностью отсутствуют.

Feliz enhancement good first issue

Самый полезный комментарий

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

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

Все 15 Комментарий

Извини, я заблудился. Базовые свойства CSS не имеют ничего общего с MUI. Фелиз прав, моделируя их в соответствии со спецификацией CSS. Когда вы говорите, что MUI использует массив строк, что вы имеете в виду? AFAIK CSS не имеет понятия массива. Не могли бы вы смешивать свойства CSS с реквизитами компонентов?

Ну, это просто массив строк, к которому я обращаюсь по индексу, как в приведенном выше фрагменте. Да, я согласен, что Фелиз не должен особо учитывать библиотеку. Мой вопрос заключался в том, следует ли отступить, чтобы разрешить строковый ввод для этих реквизитов.

О верно. Вы имеете в виду это :

image

Да, может быть, надо ослабить boxShadow Фелиза?

Кстати, смотрите эту страницу . Я понятия не имею, что они имеют в виду, но, возможно, есть другой способ использовать массив shadows темы в MUI, указав индекс в свойстве boxShadow (а не в стиле)?

К сожалению, не похоже, что fade поддерживает эту опору, для чего я и использую это свойство.

Я вообще не видел эту опору для каких-либо компонентов, и я также не видел компонент Box они используют на странице, на которую я ссылался, поэтому я запутался. Просто ради этого вы можете попробовать установить пользовательское свойство "boxShadow" или "box-shadow" для любого компонента и посмотреть, что работает.

В любом случае, «теневую» страницу документов действительно нужно улучшить.

Да, может, коробку Фелиза Тень надо ослабить?

В идеале этого не должно быть, потому что это то, для чего нужен style.custom . Поскольку мы говорим об этой реакции, я думаю, это должно быть boxShadow . Хотя, опять же, перегрузка string не должна быть вредной. я подумаю об этом

Наличие перегрузки базовой строки для всего позволяет людям делать то же самое, что и style.custom без необходимости искать / запоминать настоящее имя css. Можно было бы иметь что-то вроде style.boxShadow.custom чтобы они все еще знали, что отклоняются от типичных вариантов использования этого стиля.

Наличие перегрузки базовой строки для всего позволяет людям делать то же самое, что и style.custom без необходимости искать / запоминать настоящее имя css.

Хм, вообще-то неплохая идея. Я имею в виду, что мы определенно хотим поощрять безопасность типов. Но в CSS в любом случае все является строкой, и было бы неплохо иметь аварийный люк иногда для «быстрых и грязных» вещей или, как говорит @Shmew , если что-то в настоящее время не поддерживается.

Я не уверен, что иметь перегрузку строк для всех атрибутов стилей - хорошая идея, но, по крайней мере, это следует учитывать.

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

style.custom.boxShadow "3px 3px red, -1em 0 0.4em olive"
style.custom.transition "margin-right 4s ease-in-out 1s"
style.custom("-webkit-text-stroke", "4px navy") // keep original custom fallback too

Я не уверен, что иметь перегрузку строк для всех атрибутов стилей - хорошая идея, но, по крайней мере, это следует учитывать.

@cmeeren Использование любой внешней библиотеки, которая может предоставлять данные для стиля, будет затруднительным, если они предназначены для непосредственного предоставления стилю. Мы либо должны извлекать данные, либо всегда использовать style.custom ("..", someLibraryThing)

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

@zanaptak Мне тоже нравится эта идея, я не уверен, лучше это или хуже, чем то, что я предлагал для обнаружения.

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

Правда.

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

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

@cmeeren Я думаю, что это хорошо и является естественным продолжением предоставленных перегрузок, но меня беспокоит, что если мы просто будем использовать style.boxShadow(rawValue: string) то вместо того, чтобы писать код рекомендованным типобезопасным способом, будут злоупотреблять. Мне также нравится подход, предоставляемый @zanaptak, потому что он препятствует использованию необработанных значений для CSS, если вы не знаете, что делаете, и не существует безопасного для типов способа написания CSS. Но опять же, в приведенном выше варианте использования при взаимодействии с внешним CSS использование настраиваемого значения не должно восприниматься как взлом или обходной путь, поэтому style.boxShadow(rawValue: string) и я предполагаю, что большему количеству людей потребуется такой уровень простоты при написании пользовательские значения.

Оба подхода хороши и имеют на то веские причины. Лично я больше склоняюсь к прежнему подходу style.boxShadow(rawValue: string) .

Извините, я не смог обсудить / исправить многие проблемы вокруг Feliz / Feliz.Mui на этой неделе из-за работы, я стараюсь вернуться к этим проблемам как можно скорее и взять эту проблему тоже (если кто-то не захочет принять это, было бы классно)

вместо того, чтобы писать код рекомендованным типобезопасным способом, он будет часто злоупотреблять

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

В любом случае, похоже, мы все более или менее согласны с перегрузкой rawValue: string для всех стилей. :)

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

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

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

Абсолютно с тобой в этом 👍

Была ли эта страница полезной?
0 / 5 - 0 рейтинги