Override Bootstrap class with scss, but only when the Bootstrap class is nested under a custom class

Question

I'd like to customize a Bootstrap class (btn, in the following example), but only when it's nested under my own class (banner-message, in the following example):

<div class="banner-message">
  <button class="btn btn-primary">Click Me!</button>
</div>

This is the SCSS (live demo):

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  width: 300px;
  
  btn {
    border-radius: 8px;
    color: orange;
  }
}

I tried following this answer, and enclose my classes' file with the following, but it didn't work:

@import "bootstrap/btn";

... my classes' definitions

@import "bootstrap";

Rok Benko · Accepted Answer · 2022-03-06T12:24:18.847

0

Here you go...

You missed a dot before the btn class.

HTML:

<div class='banner-message'>
    <button class='btn btn-primary'>Click Me!</button>
</div>

SCSS:

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}
  
.banner-message {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    width: 300px;
    
    .btn {
      border-radius: 8px;
      color: orange;
    }
}

See the forked JSFiddle here.

edited Mar 06 '22 at 12:24

answered Jul 04 '21 at 12:01

Rok Benko

14,265
2
24
49

Thanks, though I'm looking for an scss overriding solution, similar to the answer I linked to. Using `!important` all over the place is not a good practice here, I'm certain we can do better. – OfirD Jul 04 '21 at 17:08
Ah, you're right :) It didn't occur to me that the linked question is relevant to css modules, and so isn't relevant to my question, thanks. – OfirD Jul 04 '21 at 20:07

Override Bootstrap class with scss, but only when the Bootstrap class is nested under a custom class

1 Answers1