CODEWITHSUNDEEP
cssreactjsmaterialize
airush
airush

Reputation: 770

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.

Upvotes: 1

Views: 678

Answers (3)

octobus
octobus

Reputation: 1276

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.

Upvotes: 1

Chriss Hd
Chriss Hd

Reputation: 643

You don't have a unit for margin-top in your css class

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

Upvotes: 0

Calvin
Calvin

Reputation: 8765

You'll need to use camelCase for your classname, so .customClass instead of .custom-class.

Then your import statement should look like:

import css from './UserProfile.css`;

and in your component: 

<h1 className={css.customClass}>Title</h1>

Read up on CSS Modules for more information.

Upvotes: 1

Related Questions