Injected CSS tag breaks Select color scheme

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

web_ntx premium asked 12 months 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

Add comment

Wojciech Staniszewski staff answered 12 months ago

0 0 Best answer

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 premium commented 12 months 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 11 months ago

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

web_ntx premium commented 11 months ago

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

Wojciech Staniszewski staff commented 11 months ago

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

Add comment

Write

Create snippet

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: MDB5 1.0.0-beta6
Device: PC
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: No

web_ntx

Premium support

129Support score
12Questions 6Answers

0Snippets likes 1Snippets