Описание тега theme-ui

Пользовательский интерфейс темы - это библиотека для создания тематических пользовательских интерфейсов на основе принципов проектирования на основе ограничений. Создавайте библиотеки пользовательских компонентов, системы дизайна, веб-приложения, темы Gatsby и многое другое с помощью гибкого API, обеспечивающего лучшую в своем классе эргономику для разработчиков.
1 ответ

Гэтсби и Theme-UI ColorModeProvider

Я экспериментировал с различными стратегиями загрузки шрифтов с помощью Gatsby, и в итоге мне пришлось справиться с источником gatsby-plugin-theme-ui, чтобы я мог обновитьtheme.fonts значения после загрузки всех шрифтов клиентом (по умолчанию theme.…
27 апр '20 в 08:18
4 ответа

Как настроить цвет фона тела с помощью gatsby-plugin-theme-ui

При создании темы Gatsby с помощью gatsby-plugin-theme-ui в документации указано, что вы можете настроить цвет фона тела, добавив его к своему объекту темы во вложенном объекте цветов. Похоже, это не имеет никакого эффекта. Другие переменные, такие …
26 июл '19 в 18:08
1 ответ

Библиотеки компонентов, которые интегрируются с Theme-UI

Theme-UI имеет ряд встроенных улучшений. Но все это "простые" компоненты. То есть никаких вкладок, аккордеонов, сортируемых таблиц или других компонентов, которые имеют более "сложные" функции. Я ищу предложения по другим библиотекам компонентов, ко…
1 ответ

Зачем использовать Rebass вместо пользовательского интерфейса темы?

Я выбрал Rebass в качестве библиотеки компонентов для своего приложения. Поскольку Rebass не любит темы, ему нужна библиотека тем. Хорошо, я выбрал Theme UI для определения моей темы, а затем начал создавать свое приложение. Я быстро заметил, что вс…
20 апр '20 в 22:26
1 ответ

Почему sx props не может получить доступ к объекту темы?

Я пытаюсь использовать theme-ui для нового проекта Gatsby, над которым я работаю. После выполнения инструкций в документации по интерфейсу темы я все еще не могу заставить темы работать должным образом. У sx props, похоже, нет доступа к объекту темы…
10 май '20 в 18:58
0 ответов

Как повторно использовать тему theme-ui в компоненте блока кода Gatsby React-Live?

Я работаю над компонентом блока кода MDX на основе плагина theme-ui-gatsby, prism- react -renderer и react-live. Как лучше всего повторно использовать ту же тему выделения синтаксиса для react-live а также react-prism-renderer компоненты с учетом то…
10 фев '20 в 06:44
0 ответов

Как использовать собственные классы в пользовательском интерфейсе темы

Я использую gatsby-plugin-theme-uiна моем статическом сайте. Я добавил собственный класс стиля вindex.js нравится styles: { custom: { backgroundColor: "background", color: "text", fontFamily: "default", fontSize: 2, lineHeight: "text", padding: 0, o…
10 июн '20 в 11:44
3 ответа

Опора sx UI темы игнорируется при импорте компонента сборника рассказов

Я установил и опубликовал на частном сервере систему дизайна StoryBook с использованием ThemeUI, которая содержит компоненты. Одним из таких компонентов является кнопка, показанная ниже. import React, { FC } from "react"; import { Button a…
24 июн '20 в 12:30
1 ответ

useColorMode, импортированный из плагина пользовательского интерфейса темы в GatsbyJS на основе React, не работает из-за "InvalidCharacterError: строка содержит недопустимый символ"

Я использую тему GatsbyJS от @smakosh и плагин Theme UI; Я научился использовать крючки ' useColorModeиз крючков -useThemeUI а также useColorMode ; Весь мой код полностью верен; Я уже очистил кеши GatsbyJS, npm и браузера, но те же ошибки все еще с…
16 авг '20 в 22:59
2 ответа

Как исправить несовместимость типов свойств цвета в компоненте Box с помощью машинописного текста и эмоций

Я пытаюсь сделать генерала Boxкомпонент реагировать на новый проект. Это будет основа для всех остальных компонентов. Я использую стилизованную систему, эмоции и, в конечном итоге, пользовательский интерфейс темы для оформления и стилизации всех мои…
1 ответ

Как использовать значения градиента с Theme-ui?

Я использую https://theme-ui.com/ для стилизации своих компонентов. Все, что касается опыта, было великолепным, но я просто не могу заставить работать значения градиента. У меня есть кнопка, граница которой должна измениться. У меня определен следую…
16 апр '20 в 10:25
0 ответов

Заставить компонент поместиться в меньший контейнер, как если бы с медиа-запросами

У нас есть довольно сложный компонент, основанный на сетке и гибкости. Макет не требует никаких медиа-запросов для адаптации к экрану, но мы по-прежнему используем их для множества различных настроек, таких как цвета фона, отступы / поля, размеры шр…
31 авг '20 в 09:01
1 ответ

UseThemeUI в ThemeUI не содержит useColorMode

Я пытаюсь использовать темы в Rebass, и он предложил Theme UI для создания тем. Следуя руководству по следующему, я не могу получитьsetColorMode работать в моем сборнике рассказов. Импортировать useColorMode import React from 'react' import { ColorM…
02 янв '20 в 11:51
0 ответов

Запретить размонтирование компонента макета gatsby на странице и изменение темы

Я пытаюсь реализовать компонент макета на сайте gatsby, чтобы компонент не отключался при изменении страницы. Я также использую Mdx и theme-ui. Чтобы предоставить компонент макета, я используюgatsby-plugin-layout и компонент хранится в src/layouts/i…
22 май '20 в 19:09
1 ответ

Можно ли перезаписать шрифты gatsby-theme-blog?

Я использую gatsby-theme-blog и хотел бы использовать шрифты, отличные от стандартных шрифтов "Montserrat", которые поставляются с темой "Wordpress 2016". Если возможно, я бы хотел изменить шрифт на "Work Sans", который используется темой " fairyGat…
13 апр '20 в 10:38
0 ответов

В чем разница между этими параметрами рендеринга в Theme-UI?

В Theme-UI есть несколько вариантов рендеринга для стилизации HTML. Например, стилизовать тег h1 можно с помощью: <Styled.h1> <BaseStyles><h1></h1></BaseStyles> <Heading as={"h1"}> Какие отличия? Когда с…
18 июл '20 в 21:15
1 ответ

Theme-ui/prism не будет работать с файлами разметки gatsbyjs

Я использую @theme-ui/prism для форматирования текста блока кода в файлах уценки. Плагин уценки, который я использую, - это gatsby-plugin-mdx. Кажется, это не работает, потому что у меня не появляется темный фон в блоке кода. Вот что я сделал: yarn …
14 авг '20 в 16:51
0 ответов

Могу ли я стилизовать предварительный просмотр Netlify CMS с помощью пользовательского интерфейса темы и / или эмоций?

У меня есть проект Gatsby, в котором используется Theme UI и Netlify CMS. Как я могу стилизовать панель предварительного просмотра Netlify CMS с моими стилями пользовательского интерфейса темы? Netlify CMS не поддерживает библиотеки CSS-in-JS: https…
15 май '20 в 07:31
0 ответов

Настройка нестандартных размеров шрифта для компонента заголовка в Theme-ui

Я хочу добавить собственные размеры шрифта для <Heading />компоненты в theme-ui. Скажем, мне бы хотелось, чтобы в моем приложении были следующие размеры: const headingFontSizes = { h1: '60px', h2: '55px', h3: '50px', h4: '45px', h5: '40px', h6…
22 сен '20 в 23:01
1 ответ

Высота в пользовательском интерфейсе темы

У меня есть встроенный компонент theme-ui, и его высота не работает. В консоли отображается нормально, но отображается 100%; <Embed src={url} sx={{width: '800px', height: '400px'}}/> Встраивание находится внутри модального окна 100vw для 100vh…
05 ноя '20 в 01:43