Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Using color in components

cokicoki free asked 5 years ago


1.Why I cannot use color to container like below? this color "#fafafa"did not affect at all when I render, am I doing something wrong here. Here is the code. What is the correct one to use the color in MDB components?

  <MDBContainer color="#fafafa">
    <h1 className="font-weight-bold">Projects 4</h1>
  </MDBContainer>

2.And also in the same sample case above, how is to use gradient color and rgba color in MDBContainer, will you give example code how to write them, say in MDBContainer like above?

3.And how to use my own custom colors for my web? Here is the colors that I want to use: #010038, #293a80, #537ec5, #f39422. Would you please show me how to setup them once and for all? I have followed the 5 min tutorial but never succeed. I have already install node-sass, and I have already import "./assets/scss/mdb.scss". But I am still confused in _custom-variables.scss. Would you show me how to write the colors above in _custom-variables.scss the correct one? So I could be able to use them in every MDB components.

Thank you very much for your kind help and assistance.


Jakub Chmura staff answered 5 years ago


Hi [@cokicoki](/profile/?id=74264)

  1. You can't use color=... because we don't have that props. You can use ClassName,
  2. Gradients, RGBA, And use className,
  3. You can do it by using your custom class and import your CSS that overwrite basic MDB styles. Or you can read these threads on our forum: Thread 1, Thread 2

Best, Kuba



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.22.1
  • Device: PC
  • Browser: Mozilla Firefox
  • OS: MS Windows 7
  • Provided sample code: No
  • Provided link: No