Injected CSS tag breaks Select color scheme


Topic: Injected CSS <style> tag breaks Select color scheme

web_ntx pro premium asked 2 weeks ago

Expected behavior

Changing colors in MDB SCSS files for Select component should recolor component.

Actual behavior

The select label does not change color due to a style tag injected at the bottom of the HTML separate from mdb.min.css. I do not know how this style tag is being inserted.

Resources (screenshots, code snippets etc.)

This is the style tag injected into the DOM which is causing issues:

<style type="text/css">.select-input-label-active {  color: #1266f1 !important; }</style>

Here is my scss/custom/_styles.scss file:

// Your custom styles

/*
To use, add this line
`@import './custom/styles.scss'`
to the end of the file
`../mdb.pro.scss`
*/

.select-input.focused {

  & ~ .select-label {
    color: $primary
  }

  & ~ .form-notch .form-notch-leading {
    border-top: 2px solid $primary;
    border-bottom: 2px solid $primary;
    border-left: 2px solid $primary;
  }

  & ~ .form-notch .form-notch-middle {
    border-color: $primary;
  }

  & ~ .form-notch .form-notch-trailing {
    border-color: $primary;
  }
}

.select-input.focused ~ .select-arrow {
  color: darken($primary, 20%);
}

// This is not working
.select-input-label-active {
  color: $primary !important;
}

wrong color label


You should try adding this style to .select-label element. This should apply the color correctly.

If not, try like this:

.select-input.focused~.select-label {
    color: #1266f1 !important;
}

web_ntx pro premium commented a week ago

Unfortunately neither of these worked. The style tag being added is at the bottom of the DOM and has precedence.


Wojciech Staniszewski staff commented a week ago

Label class is not adding correctly to MDBSelect label. We will fix this in this release :)


web_ntx pro premium commented 7 days ago

Thank you. It would also be nice if the MDBSelect component used the $primary color by default.


Wojciech Staniszewski staff commented 3 days ago

Thanks for your suggestion. We will think about this in the next release.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No