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

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

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

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

Источник

3 ответа

Решение

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

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-UI, за исключением того, что в нем используется начальная точка create-реагировать-приложение, поэтому зависимости проще.

Изменить r5o1vw5po

Источник

Согласно документации Material-UI, вы должны добавить<StylesProvider/> component, который обертывает ваше дерево компонентов.

import { StylesProvider } from '@material-ui/core/styles';

<StylesProvider injectFirst>
  {/* Your component tree.
      Styled components can override Material-UI's styles. */}
</StylesProvider>

Если injectFirst установлен (и true конечно), теги стиля пользовательского интерфейса материала будут вставлены первыми в заголовок (меньший приоритет)

Источник

В версии 5 MUI изменился импорт и некоторые компоненты стали устаревшими. По умолчанию теги стиля вставляются последними в <head>элемент страницы. Они получают большую специфичность, чем любые другие теги стиля на вашей странице, например модули CSS, стилизованные компоненты. Не в документации, а в StyledEngineProviderкомпонент имеет injectFirstprop для ввода тегов стиля сначала в голову (менее приоритетный):

      <StyledEngineProvider injectFirst>
 <MUIThemeProvider theme={theme}>
  {children}
 </MUIThemeProvider>
</StyledEngineProvider>
Источник
Другие вопросы по тегам