How to change color of imported React components

How can I visually outline the imported react components in my JSX code? Right now they have the same yellow color as common html objects.

 

Thanks

 

11 comments
Comment actions Permalink

Started from 2021.3.1 you can specify "Custom Tag Name" in "Settings/Preferences | Editor | Color Scheme | XML" for changing the color of JSX(React)components. 

1
Comment actions Permalink

But this also changes the color of common html tags. I want to distinguish between common html tags and imported React ones :(

0
Comment actions Permalink

Could you please show in a screenshot which setting you've changed?

0
Comment actions Permalink

It should be "Custom Tag Name". Which IDE version do you use?

0
Comment actions Permalink

So is there a way to have the imported components in the same color within the JSX? So I would expect `PlannerWrapper` to have the same color as e.g. `DashboardWrapper`

 

Thanks!

 

0
Comment actions Permalink

Please update to 2021.3.1+. There will be an option "Custom Tag Name" for configurting JSX tags color.

`DashboardWrapper` is colored with "Exported function" setting color. It's different from "Custom Tag Name".

 

0
Comment actions Permalink

Yes in the Javascript setting area, but the used element in the JSX still is in other color, however the import is correctly coloured:

But then in JSX it is in html tag color again:

0
Comment actions Permalink

The HTML tag color is configured in the option "Custom Tag Name".

1
Comment actions Permalink

oksanas chumaks solution works for me. there is indeed a "custom tag name" and the components color is now changed. thanks

0

Please sign in to leave a comment.