How to override materialize css in React

Question

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.

Hello, you should use px in css files please change your code tomargin-top: 30px !important; and try again — octobus
– octobus, Commented Jul 31, 2019 at 13:46
Believe me it happens a lot, don't worry :) I also post an answer. Good luck with your project. — octobus
– octobus, Commented Jul 31, 2019 at 13:53
@octobus Thanks. I don't know, do I have to delete question(cause the issue has no relation with overriding)? — airush
– airush, Commented Jul 31, 2019 at 13:59

octobus · Accepted Answer · 2019-07-31 13:52:09Z

1

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.

answered Jul 31, 2019 at 13:52

octobus

1,2761 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Calvin · Accepted Answer · 2019-07-31 13:48:16Z

1

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.

answered Jul 31, 2019 at 13:48

Calvin

8,7377 gold badges45 silver badges52 bronze badges

Comments

Chriss Hd · Accepted Answer · 2019-07-31 13:49:02Z

0

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

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

answered Jul 31, 2019 at 13:49

Chriss Hd

6615 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to override materialize css in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related