Включение файла css в проект React
Я пытаюсь использовать материальный интерфейс с реакцией.
На этом сайте: https://jamesmfriedman.github.io/rmwc/installation
Это говорит
material-components-web должен быть установлен автоматически как одноранговая зависимость. Включите node_modules / material-components-web / dist / material-components-web.min.css в свой проект с помощью выбранного вами метода (с помощью тега ссылки, загрузчика css и т. д.).
Но я не уверен, что это на самом деле означает. Как и куда мне нужно импортировать этот файл, чтобы использовать эту библиотеку?
Ответы 2
Сначала вы должны добавить библиотеку в свой проект, запустив:
npm install --save rmwc или yarn add rmwc
Во-вторых, вы должны понимать следующее:
Вообще говоря, библиотека Компоненты материала Web на самом деле является куча готовых стилей дизайна, которую вы можете связать со своим проектом, чтобы он выглядел как Материал.
Библиотека, которую вы используете, Веб-компоненты React Material [RMWC], является оболочкой React для предыдущей библиотеки. Это означает, что он дает вам набор гибких компонентов React, например <Button />, <TextField /> и т. д., Которые встроены в React и действуют в виртуальной DOM.
Он не придает элементам особого стиля. Более того, он разработан, чтобы не придавать вам лишнего стиля. Чтобы ваши импортированные компоненты React выглядели как Материал, вы должны добавить стиль из родительской библиотеки [Material Components Web].
Чтобы добавить стиль из этой библиотеки, используйте следующее:
Добавьте его в свой проект:
npm install material-components-web или yarn add material-components-web
Затем используйте следующую строку (используйте ее один раз в своем проекте):
import 'node_modules/material-components-web/dist/material-components-web.min.css';
После того, как вы успешно добавите миниатюрный файл css в свой проект, вы должны получить набор классов CSS, которые вы можете переопределить в своем коде. Это самый простой способ добиться этого. Второй способ (более сложный, но более гибкий) - добавить в проект файлы дерзость из библиотеки material-components-web. Затем вы должны настроить загрузчик Webpack для обработки файлов дерзость и использовать миксины дерзость, такие как @import "@material/button/mdc-button". В официальных документах есть хорошая инструкция: github.com/material-components/…
Я следил за этой лабораторией кода Google: codelabs.developers.google.com/codelabs/mdc-112-web/… Однако в руководстве ничего не говорится об изменении стиля компонента. Не могли бы вы уточнить?
@ Dawn17, если вы хотите изменить стиль, например <section className='mdc-top-app-bar__section> .... </section>, создайте свой собственный файл styles.css, затем запишите свои стили .mdc-top-app-bar__section { ... <your styles> ... } и импортируйте файл styles.css в свой код .. Звучит хорошо?
где мы можем увидеть все те имена классов, которые мы можем переопределить? Кроме того, как установить цветовые коды для основной и дополнительной темы? Кажется, что у RMWC это есть, но я не уверен, как это сделать с Material Component Web. Я хотел бы применить эту тему ко всем компонентам, которые я использую. Заранее спасибо.
RMWC выполняет упаковку ReactJS. Все стили по-прежнему выполняются MDC.
Вы можете добавить в свой проект миниатюрный файл mdc css, но это не даст вам особой настройки. Я бы посоветовал использовать sass для вашего проекта и импортировать туда модули mdc. Таким образом вы можете изменять переменные, например. от основного цвета, как описано здесь: https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme
$mdc-theme-primary: #fcb8ab;
$mdc-theme-secondary: #feeae6;
$mdc-theme-on-primary: #442b2d;
$mdc-theme-on-secondary: #442b2d;
@import "@material/button/mdc-button";
Более подробную документацию о том, как использовать стили специально с RMWC, можно найти в документе: https://jamesmfriedman.github.io/rmwc/styling
Но в целом вы можете создавать свои собственные классы, которые затем применяете к своим элементам, таким как кнопки. Например.
.my-button-style {
border-radius: 10px;
}
Или вы напрямую переопределяете классы mdc. .mdc-button { радиус границы: 10 пикселей; }
Классы mdc можно найти на каждом из сайтов пакетов на GitHub. (например, для кнопки: https://github.com/material-components/material-components-web/tree/master/packages/mdc-button)
Спасибо. На самом деле я пытаюсь настроить стили для своего приложения для реагирования. Но как мы на самом деле это делаем? Что мне нужно сделать после добавления строки
import 'node_modules/material-components-web/dist/material-components-web.min.css';?