Search code examples
cssreactjsmaterialize

How to override materialize css in React

I am using react to build simple app, and using Materilize css. In my UserProfile Component class importing UserProfile.css import "./UserProfile.css. 

/* UserProfile.css */ 

.custom-class {
  margin-top: 30 !important;
  color: pink;
}

UserProfile in render method have 

<h1 className="custom-class">Title</h1> // Margin is not applyed, but color is pink

I have an option to 

<h1 style={{ marginTop: 30, color: "pink" }}>Title</h1>

this works fine, but I prefer style code in css files.

I am not sure maybe that issue has no relation to overriding.

Solution

  • you should use px in css files, change your code to margin-top: 30px !important; and it should work.

    And if you want to check overriding issues in css, you can inspect your code(with right click your browser and choose inspect) and check if its crossed or not.