How to add class by javascript

Konr Fth 0
Viewed 63

I try to add class by module.scss by this do not work properly. I know that I have good path because adding innerHtml working.

import styles from './style.module.scss';
(...)
useEffect(() => {
  document
    .querySelector('.thisButtonAddClass')
    .querySelector('div')
    .querySelector('input')
    .classList.add(styles.btn);
}, []);

Main problem is that I want to style react-mailchimp-subscribe and I have no clue how to access to the html tags.

reactjs javascript
1 Answers

styles is object, for classList.add you must use string with name of class

or use React like style:

<input className={styles.btn} />

But, in my opinion, you are using useEffect with native js incorrectly.

And it's best to pack the render of this input into a separate function, something like this:

const renderInput = () => {
    const [flag, setFlag] = React.useState(false);

    React.useEffect(() => {
        setFlag(true)
    }, []);

    return (
        <input className={flag?styles.btn1:styles.btn2} />
    )
}
ooo0
Related