Использовать только CSS из материалов UI React Components

Question

Material UI - это набор компонентов React, которые реализуют Material Material Design наилучшим образом, как я видел до сих пор.

Теперь у меня есть проект, в котором я, к сожалению, не могу использовать React.js. Но я хочу использовать большой CSS, который включает проект.

Есть ли способ вставить стили в мой существующий проект?

Answer 1

Я не знаю точно, если это реализует те же компоненты материала каркаса Ui, но я использовал его для приложений, которые требуют материальной конструкции и, кажется, что вы ищете , Также, глядя на источник Material UI, кажется, нет простого способа извлечь таблицы стилей.

https://www.muicss.com/

Надеется, что это помогает

Answer 2

• производительность (особенно на мобильных устройствах) является rather poor, потому что большая частью анимации с сохранением состояния и требуют общений с резьбой JS.
• из-за встроенных стилей, мобильная поддержка и отзывчивость вообще отсутствуют, см. here
• Материал UI не имеет CSS, все стили Inline. HTML генерируется для одной кнопки Плавающих действий (со знаком плюс значок) выглядит следующим образом:

<button style="border:10px;background:none;box-sizing:border-box;display:inline-block; 
    font:inherit;font-family:Roboto, sans-serif;tap-highlight-color:rgba(0, 0, 0, 0); 
    cursor:pointer;text-decoration:none;outline:none;transform:translate3d(0, 0, 0); 
    vertical-align:bottom;transition:all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 
    position:relative;height:56px;width:56px;padding:0;overflow:hidden; 
    background-color:#ff4081;border-radius:50%;text-align:center;-webkit-appearance:button;" 
     tabindex="0" type="button" data-reactid=".0.1.0.0.1.1.1.0.0"> 
    <div data-reactid=".0.1.0.0.1.1.1.0.0.0"> 
    <div style="transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;" 
     data-reactid=".0.1.0.0.1.1.1.0.0.0.1"> 
     <svg style="display:inline-block;height:56px;width:24px;transition:all 450ms 
     cubic-bezier(0.23, 1, 0.32, 1) 0ms;line-height:56px;fill:#ffffff;color:#ffffff; 
     -webkit-user-select:none;" viewBox="0 0 24 24" data-reactid=".0.1.0.0.1.1.1.0.0.0.1.1:$/=10"> 
     <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" data-reactid=".0.1.0.0.1.1.1.0.0.0.1.1:$/=10.0"> 
     </path> 
     </svg> 
    </div> 
    </div> 
</button> 

Answer 3

Чтобы обеспечить контекст для предыдущего вклада:

• «Материал UI не имеет CSS, все стили инлайн "
  • встроенные стили означает трудно управлять и не кеширования CSS либо
• «не мобильный дружественный»
  • Иногда «рябь» анимация срабатывает дважды при наведении курсора вниз/сенсорный старт. Это приводит к замедлению производительности и проблем с UX.
• «из-за встроенные стили, мобильная поддержку и оперативность в целом отсутствует»
  • диалоговые окна не растягиваются на соответствующую сумму в соответствии с некоторым тестированием. Видимо, исправлено в последних ветвях «dev».

Пытаясь вернуть к сообществу :)