Пользовательский интерфейс материала css - PullRequest
Новая
       7

Пользовательский интерфейс материала css

0 голосов
/ 20 декабря 2018

Мне трудно понять, как я должен структурировать свой проект.Я использую реагировать с материалами UI и CSS модулей.Проблема в том, что бог знает почему, все стили из MUI загружаются в нижней части заголовка так же, как стили CSS.После некоторых исследований я нашел два решения:

  1. Использование! Важный внутри модулей CSS, что ужасно.
  2. Изменение порядка впрыска https://material -ui.com / guides /совместимость / # css-modules

Проблема со вторым состоит в том, что это будет ужасная скучная работа в многокомпонентном проекте, где каждый раз, когда вы вводите новый компонент, вы должны загружать его вручную какв примере.Я что-то упускаю из виду?У вас есть идеи, как проще изменить порядок загрузки?

1 Ответ

0 голосов
/ 20 декабря 2018

Я думаю, вы можете неправильно понять что-то в примере.Вам не нужно ничего делать для каждого компонента отдельно, чтобы изменить порядок загрузки.Шаги следующие:

1.В вашем index.html добавьте комментарий наподобие <!-- jss-insertion-point --> в заголовок, куда вы хотите вставить CSS CSS.

2.В вашей index.js (или где-нибудь в верхней части иерархии рендеринга) создайте конфигурацию jss, чтобы указать имя комментария точки вставки: 

import JssProvider from "react-jss/lib/JssProvider";
import { create } from "jss";
import { jssPreset } from "@material-ui/core/styles";

const jss = create({
  ...jssPreset(),
  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
  insertionPoint: "jss-insertion-point"
});

3.Оберните ваш элемент верхнего уровня в JssProvider, чтобы включить эти конфигурации в игру (без специфических для компонента шагов): 

function App() {
  return (
    <JssProvider jss={jss}>
      <div className="App">
        <Button>Material-UI</Button>
        <Button className={styles.button}>CSS Modules</Button>
      </div>
    </JssProvider>
  );
}

Я создал CodeSandbox, похожий на тот, на который указывает Material-Документация пользовательского интерфейса, за исключением того, что этот использует начальную точку create-реагировать-приложение, поэтому зависимости проще.

Edit r5o1vw5po

...