Topic: Button rounded and color issues
I am using git pro version of MDB React, however I am experiencing some issues with buttons.
When I use rounded attribute the .btn class sets the border-radius and this is not getting overridden by .btn-rounded class. Currently I use workaround and add custom button class with border-radius with CSS to achieve that effect.
I cannot use color="light-blue darken-4". If I set it to color="light-blue" and add class="light-blue darken-4", it fills the outlined button and when button clicked it will change the border color which is light-blue without the part darken-4. Even if I try to achieve it with CSS and !important it does get overridden by MDB.
Jakub Chmura staff premium answered 5 years ago
Hi @rrt,
We are currently trying to fix button classes. We have problems with them because bootstrap uses a lot of !Important
's in its code. We are afraid that these changes will require breaking change and major release so I can't say when they will be published. At the moment you have to manage writing your custom CSS classes.
Best, Kuba
rrt commented 5 years ago
Hi @Jakub Chmura,
Thank you for your response. Is this valid for rounded button as well or only for color classes.
Thank you.
Jakub Chmura staff premium commented 5 years ago
Rounded buttons are a pro component, so you won't be able to use them as a free user.
rrt commented 5 years ago
I have pro license bought with another account and I am able to access them, however they still do not work as intended. Please refer to point 1 from the original question.
Jakub Chmura staff premium commented 5 years ago
I have tested rounded btn's right now and it works fine for me.
Check this, code below was copied directly from our documentation.
import React, { Fragment } from 'react'; import { MDBBtn } from 'mdbreact';
const ButtonPage = () => {
return (
<Fragment>
<MDBBtn color='primary' rounded>
Primary
</MDBBtn>
<MDBBtn rounded>Default</MDBBtn>
<MDBBtn rounded color='secondary'>
Secondary
</MDBBtn>
<MDBBtn rounded color='success'>
Success
</MDBBtn>
<MDBBtn rounded color='info'>
Info
</MDBBtn>
<MDBBtn rounded color='warning'>
Warning
</MDBBtn>
<MDBBtn rounded color='danger'>
Danger
</MDBBtn>
</Fragment>
);
};
export default ButtonPage;
Please give me more details about how to reproduce your issue, show me code, and maybe screenshot from dev-tools. I don't know how to help you right now, because I don't know what's wrong with your code.
Best, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.5
- Device: Laptop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No