How to apply CSS to the input fields of only one react component?

Question

I am trying to apply CSS to the input fields of a react component. I have written CSS in a correspondent CSS file of a component but It is applied to input fields of other components. What can I do to apply the input field styles only for the component that I want? In the image below I have shown the code of CSS input fields of a single component

Answer 1

1. First of all, make sure your CSS file name is fileName.module.css:

   style.module.css
   

2. Write your CSS attributes:

   .test{color:red;}
   

3. Import your CSS file into your React component:

   import styles from './style.module.css'
   

4. Apply the style:

   <h1 className={styles.test}>This is test text.</h1>
   

Done!