Button rounded and color issues


Topic: Button rounded and color issues

rrt asked 5 years ago

I am using git pro version of MDB React, however I am experiencing some issues with buttons.

  1. 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.

  2. 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


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
  • 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