Как настроить внешний вид blueprintjs в приложении create-реагировать

Я новичок, чтобы реагировать, и я строю свои приложения с:

create-react-app applicationame --scripts-version=react-scripts-ts

Я не пользуюсь веб-пакетом, потому что create-реагировать-приложение делает все для меня, и я думаю, что это просто прекрасно!

Конечно, мне нужен набор инструментов для интеллектуальных компонентов. Спасибо за то, что Палантир предоставил такую ​​хорошую библиотеку бесплатно. Blueprintjs хорошо работает с React/Typescript, [ даже если многие классы еще не созданы в машинописи (например: я должен использовать

    для "pt-breadcrumbs", в то время как класс Breadcrumb предоставляется для "pt-breadcrumb"). Но кроме этого с инструментарием все в порядке. ]

    Теперь я хочу настроить внешний вид приложения в соответствии с требованиями моего клиента:

    • цвет фона и текста
    • закругленный угол или нет
    • семейство и размер шрифта
    • список значков
    • заполнение компонентов
    • задержки перехода
    • и т.п.

    Я не нашел нигде документации, чтобы настроить все это. (просматривая документы в github, много гуглят и ища в stackru)

    • я должен добавить файл css в свой проект и переопределить классы blueprintjs?
    • Могу ли я создать "тему" ​​вне моего проекта и скопировать ее в несколько разных проектов? (как я делал с jqueryui)
    • я могу сделать это без использования веб-пакета? (Я считаю этот инструмент слишком сложным)

    Спасибо за вашу помощь.

Источник

3 ответа

Я оцениваю Blueprint для стандартизированной библиотеки компонентов React, где разработчики могут использовать единый внешний вид. Blueprint позволяет стилизовать некоторые визуальные элементы компонентов, но (намеренно) не дает вам полного контроля, не переопределяя глобальную стандартную таблицу стилей (что в сущности и предлагают другие ответы). Я бы порекомендовал вам использовать открытые переменные SASS/LESS. Вот один из способов сделать это без использования веб-пакета или удаления проекта create-реагировать на приложение.

ПРИМЕЧАНИЕ: это для Blueprint v2, и я использую ответную реакцию приложения и SASS

  • npm install node-sass-chokidar и node-sass-tilde-importer (первый будет предварительно обрабатывать ваши файлы SASS, а второй вам нужен, потому что Blueprint использует соглашение "~" для импорта, который использует webpack, но по умолчанию node-sass не поддерживает)

  • добавьте ссылку на скрипт build-css в ваш пакет, который будет выглядеть примерно так (он указывает node-sass-chokidar использовать пакет tilde-importer):

    "build-css": "node-sass-chokidar --importer=node_modules/node-sass-tilde-importer --include-path ./src --include-path ./node_modules src/ -o src/"

  • Добавьте файл SASS, например App.scss, в указанное выше место (src /):

`

// override the blueprint default variable values first
$pt-intent-danger:  #ff3d00;
$pt-intent-primary: #076461;

// then pull in top-level blueprint sass file (it imports all the sub-files)
@import "@blueprintjs/core/src/blueprint.scss";

// add custom variables (optional)
$sassy-text: #ff3d7f;
$sassy-background: #c2a34f;

//add your own custom styles (optional)
.sassy-hello {
   color:$sassy-text;
   background:$sassy-background;
   padding: 5px;
}

  • Запустите ваш скрипт сборки CSS:

    npm run build-css

ПРИМЕЧАНИЕ. Известна проблема с наблюдателем файлов node-sass-chokidar и некоторыми редакторами. Это очень легкий и быстрый; если ваш редактор на несколько секунд удерживает блокировку (например, VS Code) в обновленном файле.scss, скрипт автоматической сборки завершится неудачно. Просто запустите шаг ручной сборки, описанный выше, и перестроенная с помощью часов перестройка будет работать правильно.

  • Ссылка (или обзор) вашего сгенерированного файла.css. Это будет комбинация файла Blueprint css и ваших настроек. Вы можете сослаться на это обычно в HTML:

    <link href="App.css" rel="stylesheet" />

    или в вашем коде:

    import './App.css';

    затем используйте его по мере необходимости:

    <h1 className="sassy-hello">Hey, Good-Looking!</h1>

Вы всегда можете добавить пользовательские таблицы стилей, которые переопределяют или дополняют основные стили, но если вы пытаетесь создать собственную согласованную тему поверх Blueprint, я думаю, что это правильный путь. Вы также можете встроить или CSS-to-JS ваши стили по желанию / необходимости.

Источник

Я бы порекомендовал создать свою собственную тему в (например, myTheme.css).

.pt-myTheme {
  .pt-navbar {
    background-color: #2364f0;
  }
}

в React просто добавьте его в компоненты Blueprint напрямую:

render() {
  <Navbar className="pt-myTheme"></Navbar>
}

Или к контейнеру в корне вашего приложения:

render() {
  <div className="container pt-myTheme">
    <Navbar>
      ...
    </Navbar>
  </div>
}
Источник

Поэтому проще всего было бы передать свой собственный стиль с помощью стилей компонентов React.

Допустим, мы хотим изменить размер шрифта и цвет текста в пределах <Button> составная часть.

Сначала мы объявляем наш стиль:

const buttonStyle = {
 fontSize: '30pt',
 color: 'pink',
 height: '40pt'
}

А потом в классах React render() передать этот новый стиль вашему <Button> составная часть:

<Button className="pt-intent-primary" text="My button" style={buttonStyle}/>
Источник
Другие вопросы по тегам