Topic: Disabled button doesn't look like disabled.
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:
If I disable sass, the button looks disabled:
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>
How to solve it?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 5.0.1
- Device: MacBook
- Browser: Chrome
- OS: Mac OS
- Provided sample code: No
- Provided link: No
Krzysztof Wilk staff commented 3 years 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 free commented 3 years 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 3 years 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 free commented 3 years 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 free commented 3 years 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 3 years ago
Hi!
I'm glad you figured it out! If you have more questions - feel free to ask :)
Best regards