What is the best way to write different css or scss for the same component? [closed]

Imagine that I have a complex component like a dropdown menu and I want it to have some custom styles when I use it in different places. Not only colors, but spacing and icons too.

If I'm using something like react, or vue, I could pass parameters to the props.

We can also use only scss, and there are a lot of ways of overwriting the styles:

.dropdown{
 width: 100px
}

//overwrite for my custom menu
.my-custom-menu{
 .dropdown{
   width: 120px;
  }
}

Or if using something like BEM, I could even make the main class name a variable and change it:

.dropdown{
  &__container{
    width: 100px;
  }
}

//custom
.other-dropdown{
 &__container{
   width: 120px;
  }
}

What is the best way? Are there other ways of doing this?