как применить стили s css к моему приложению CRA с пользовательским интерфейсом материала? - PullRequest
Новая
       8

как применить стили s css к моему приложению CRA с пользовательским интерфейсом материала?

1 голос
/ 26 мая 2020

Я сделал приложение для реагирования от CRA. и я буду использовать пользовательский интерфейс материала и стиль с помощью S CSS.

enter image description here

Я создал файл main. css, используя node-sass.

, и я попытался применить свой файл main. css к Material-ui Typography.

в основном. css

.logoTitle {
  font-size: 20rem;
}

Но если загружена моя веб-типографика элемент не применяет стили logoTitle ..

в чем моя проблема ..?

1 Ответ

1 голос
/ 26 мая 2020

Когда CSS специфичность совпадает, выигрывают стили, объявленные последними в CSS. По умолчанию Material-UI помещает свои стили в конец элемента <head>. Это означает, что стили по умолчанию в Material-UI будут преобладать над другими стилями, объявленными в <head> с той же спецификой (например, ваш случай font-size). Это поведение можно изменить, заключив верхний уровень приложения в элемент StylesProvider со свойством injectFirst. Это приведет к тому, что Material-UI разместит свои стили в начале элемента <head>.

Вот рабочий пример:

App. js

import React from "react";
import Typography from "@material-ui/core/Typography";
import { StylesProvider } from "@material-ui/core/styles";
import "./styles.css";

export default function App() {
  return (
    <StylesProvider injectFirst>
      <Typography variant="h1" color="primary" className="logoTitle">
        Hello
      </Typography>
    </StylesProvider>
  );
}

стилей. css

.logoTitle {
  font-size: 20rem;
}

Edit StylesProvider injectFirst

Соответствующий ответ: Как для перезаписи стилей классами и css модулями?

Документация: https://material-ui.com/styles/api/#stylesprovider

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...