Custom component highlighting Webstorm / React js

How can I set different colors for my components in Webstorm?

import Main from './Main'
import Section from './Section'

export default function home(){
    return(
        <Main>
            <Section>
               123
            </Section>
        </Main>
    )
}

I want to highlight Main and Section with different colors

>Solution :

In Webstorm, you can set different colors for your components by creating custom file templates. You can do this by going to Preferences > Editor > File and Code Templates. From there, you can create a new template for your React components and set the colors for specific keywords, such as "Main" and "Section", using the "Live Templates" feature. Once you’ve set the colors, you can apply the template to your existing files or new files you create.