Adding custom styles to react project using Materialize

Question

I am working on styling my react app using Materialize and I keep seeing mention of "adding some code to my CSS file" to add extra customization. So I made a styles.css file, added a bit of CSS into it but now I don't know how to reference it. I've tried putting it in my index.html file like this:

<!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>

To test if the style sheet is being used I added some background-color attribute but the background color isn't being changed.

So my question is, when the Materialize guides mention "add code to your CSS file", where does this CSS code go? How do I reference it? This is my CSS file for reference:

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

  main {
    flex: 1 0 auto;
  }

Answer 1

I added import './style.css' to my root react class 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')
);

Adding custom styles to react project using Materialize

Question

1 answers

solution1
0 2019-06-15 17:05:36

Adding custom styles to react project using Materialize

Question

1 answers

solution1 0 2019-06-15 17:05:36

solution1
0 2019-06-15 17:05:36