Remove a css property from a css class and create another css class

byMR

May 8, 2023

I have a css class for a button

.uploadImage-button {
  @include myTheme.theme-aware('background-color', 'formImageUploadButtonColor-bg');
  min-width: 10rem;
  height: 3.125rem;
  margin-right: 3rem;
  margin-bottom: 1rem;
  border: 1px solid white;
  border-radius: 0.125rem;
  color: #ffffff;
}

I need the same css class properties of uploadImage-button except margin-right: 3rem; not included in it.
is there a way to achieve this

>Solution :

This may be done by making a new CSS class that overrides the margin-right property and inherits all the other attributes from the.uploadImage-button class.

.uploadImage-button {
  @include myTheme.theme-aware('background-color', 'formImageUploadButtonColor-bg');
  min-width: 10rem;
  height: 3.125rem;
  margin-right: 3rem;
  margin-bottom: 1rem;
  border: 1px solid white;
  border-radius: 0.125rem;
  color: #ffffff;
}

.uploadImage-button-no-margin {
  @extend .uploadImage-button;
  margin-right: 0;
}

I hope I have helped you