title: How to override materialize css in React
body: <p>I am using react to build simple app, and using Materilize css. In my UserProfile Component class importing UserProfile.css <code>import "./UserProfile.css</code>. </p>
  
  
  
  <pre><code>/* UserProfile.css */ 
  
  .custom-class {
    margin-top: 30 !important;
    color: pink;
  }
  </code></pre>
  
  <p>UserProfile in render method have
  </p>
  
  <pre><code>&lt;h1 className="custom-class"&gt;Title&lt;/h1&gt; // Margin is not applyed, but color is pink
  </code></pre>
  
  <p>I have an option to 
   </p>
  
  <pre><code>&lt;h1 style={{ marginTop: 30, color: "pink" }}&gt;Title&lt;/h1&gt; 
  </code></pre>
  
  <p>this works fine, but I prefer style code in css files.</p>
  
  <p>I am not sure maybe that issue has no relation to overriding. </p>