Disabled button doesn't look like disabled.


Topic: Disabled button doesn't look like disabled.

MaximSht pro premium asked a year ago

Hello! I need to disable a button. I use the following code:

import React from 'react';
import { MDBBtn } from 'mdbreact';
import './assets/scss/mdb-pro.scss';
const LoginBtn = () => <MDBBtn disabled> Login </MDBBtn>;
export default LoginBtn;

The button becomes inactive. But the styles are obviously not applied correctly:

enter image description here

If I disable sass, the button looks disabled:

enter image description here

In both cases buttons are disabled. The problem is in styles. I didn't change anything in the provided files.

The element description from console:

<button data-test="button" type="button" class="btn Ripple-parent disabled btn-default" disabled=""> Login </button>

enter image description here

How to solve it?


Krzysztof Wilk staff commented a year ago

Hi!

Did you download the MDB React Pro package from our site? Or did you clone it from git/install from npm? Could you also share your file structure with me?

Best regards


MaximSht pro premium commented a year ago

Hello! I did both. I got sass files from the package from the "my orders" section of the site. mdbreact I installed from git. Here my file structure: https://www.dropbox.com/s/yl4dm6s27rnnana/Screenshot%202020-12-29%20at%2012.43.53.png?dl=0


Krzysztof Wilk staff commented a year ago

Hi!

Could you try to import these scss files as below: import '@fortawesome/fontawesome-free/css/all.min.css'; import 'bootstrap-css-only/css/bootstrap.min.css'; import 'mdbreact/dist/css/mdb.css'; and tell if it works? Just to check :)

You can also try to import these files in your main app (where are you rendering your component) as it is written here: https://mdbootstrap.com/docs/react/getting-started/quick-start/#existing.

Best regards


MaximSht pro premium commented a year ago

Hello! I don't have /css/mdb.css in ''mdbreact/dist/css'' folder. So I used mdb.css from the same package, where I got scss files. Now the button is rendered correctly. But I need to use custom styles. Here my screenshot of "mdbreact/dist/": https://www.dropbox.com/s/qvq2m9n7ys9rmov/Screenshot%202020-12-30%20at%2013.08.47.png?dl=0


MaximSht pro premium commented a year ago

Hello again. I understood where the problem was. I needed to import bootstrap.css before mdb-pro.scss. Now everything works as supposed.


Krzysztof Wilk staff commented a year ago

Hi!

I'm glad you figured it out! If you have more questions - feel free to ask :)

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 5.0.1
  • Device: MacBook
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No
Tags