Search code examples
javascriptreactjsmaterialize

Find and change materialize generated html elements from react component

In a couple of places of my app, I have some code I am not very proud of. I need to find some elements that are handled by materialize to manipulate them, so that they are displayed according to my needs. So I do this two things in two different parts of my code:

// 1.- set style from grey (placeholder text) to black(input text) and erase placeholder only on 1rst  option select
const dropdownWrapper = document.getElementsByClassName('select-dropdown dropdown-trigger')[0];
dropdownWrapper.setAttribute("style", "color:black;");

// 2.- remove AM PM labels from display
let ampmLabels = document.getElementsByClassName('timepicker-span-am-pm')[0];
ampmLabels.setAttribute("style", "display:none;");

I don't consider useRef because the elements are not part of any specific component. They are in the DOM put there by materialize when I initialize the materialize element in my component and I manipulate them from that component to fit my needs when they're displayed.

As I know there are no more elements of this type when I run de code, the document.getElementsByClassName('select-dropdown dropdown-trigger')[0]; works, but isn't there a more elegant way to find a manipulate dom elements to do this?

Edit:

The componenet where the color cannot be changed is an input type with a type="text" attribute:

html with dropdownWrapper.classList.add('text-black');:

<input class="select-dropdown dropdown-trigger text-black" type="text" readonly="true" data-target="select-options-ee9a6017-aef6-ecbf-c2a1-298693b77804">

html with dropdownWrapper.setAttribute("style", "color:black;");:

<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-ee9a6017-aef6-ecbf-c2a1-298693b77804" style="color: black;">

Seems that because of that the dropdownWrapper.classList.add('text-black'); does not work. This adds the text black to the class name in the class="select-dropdown dropdown-trigger text-black" (note the text-black at the end) but does not change the text color even if the .text-black {color: black} is added to the css file.

The style change with setAttribute, produces the style="color: black;" at the end of the html that is what seems what is actually changing the color.

Solution

  • You can do something like this:

    function addClass(selector, className) {
  const element = document.querySelector(selector);
  element.classList.add(className);
}

/* maybe move these strings to constants, add comments*/
addClass('.select-dropdown.dropdown-trigger', 'text-black');
addClass('.timepicker-span-am-pm', 'hidden');

    Tiny improvements:

    Long version:

    const dropdownWrapper = document.querySelector('.select-dropdown.dropdown-trigger');
dropdownWrapper.classList.add('text-black');

const ampmLabels = document.querySelector('.timepicker-span-am-pm');
ampmLabels.classList.add('hidden');