Topic: Injected CSS <style> tag breaks Select color scheme
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;
}
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 5 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 5 months ago
Label class is not adding correctly to MDBSelect label. We will fix this in this release :)
web_ntx pro premium commented 5 months ago
Thank you. It would also be nice if the MDBSelect component used the $primary color by default.
Wojciech Staniszewski staff commented 4 months ago
Thanks for your suggestion. We will think about this in the next release.
Services & Consulting
Hire our experts to help you design or build a dedicated project.
Answered
- 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