Добавление пользовательских стилей для реагирования на проект с использованием Materialise - PullRequest
Новая
       5

Добавление пользовательских стилей для реагирования на проект с использованием Materialise

0 голосов
/ 15 июня 2019

Я работаю над стилизацией моего приложения реакции, используя Materialise , и я все время замечаю упоминание о "добавлении некоторого кода в мой CSS-файл", чтобы добавить дополнительную настройку. Поэтому я создал файл styles.css, добавил в него немного CSS, но теперь я не знаю, как на него ссылаться. Я попытался поместить его в мой файл index.html следующим образом: 

<!DOCTYPE html>
<html lang="en">

<head>


   <link rel="stylesheet" type="text/css" href="../src/style.css" /> 


  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <title>My title</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body> 
</html>

Чтобы проверить, используется ли таблица стилей, я добавил атрибут background-color, но цвет фона не изменился.

Итак, мой вопрос в том, что когда в руководствах по Materialise упоминается «добавить код в ваш CSS-файл», куда этот код CSS уходит? Как я могу ссылаться на это? Это мой CSS файл для справки: 

 body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: purple
  }

  main {
    flex: 1 0 auto;
  }

1 Ответ

0 голосов
/ 15 июня 2019

Я добавил import './style.css' в свой корневой класс реакции index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';

const routing = (
  <Provider store={configureStore()}>
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Login} />

        </Switch>
      </div>
    </Router>
  </Provider>
)

ReactDOM.render(
  routing,
  document.getElementById('root')
);
...