How to colorize specific React.Js syntax on vscode? - scope

Question

I'm trying to figure out how to get a specific color syntax with vscode in a declaration of a class in React.
These are the colors I want to get:
As you see, the name of the class StorePicker is a purple, and the React method .Component (including the dot) is a pale grey.
As far as I know, to play with color syntax on vscode, it needs to be with the TM Scope. So to make this, on my code file where I have the class declaration, I press Ctrl+Shift+p and search for Inspect TM Scopes, and click on the specific elements to get their respective scopes.
In my specific case, I got these scopes for the elements I need to colorize:
The class Name StorePicker (entity.name.class.js, source.js)
The React keyword (entity.name.class.js, source.js)
The . (keyword.operator.accessor.js, source.js)
The method Component (entity.name.class.js, source.js)
As you can see, the StorePicker (class name), the React keyword and the method Component share the same Scope: entity.name.class.js.
So let's say I want to colorize only the .Component. So I put this on my theme's config:
{
"name": "[JAVASCRIPT] - Operator Accesor + Method",
"scope": ["keyword.operator.accessor.js", "entity.name.class.js", "source.js"],
"settings": {
"foreground": "#c2cacf"
}
}
but StorePicker and React.Component are also colorized with the same color:
And I also want to colorize only the StorePicker (class name):
{
"name": "[JAVASCRIPT] - Only Class Name",
"scope": ["entity.name.class.js", "source.js"],
"settings": {
"foreground": "#d393e9"
}
}
Again not only is StorePicker colorized, but React and Component are colorized with the same color too:
My question:
How I can get them colorized separately like in the first image (taken from a Screencast), if they share the same Scope?

Answer 1

I have no idea how you got those scopes...
{
"scope": "entity.name.type.module.js",
"settings": { "foreground": "#e2b419" }
},
{
"scope": "entity.other.inherited-class.js",
"settings": { "foreground": "#c2cacf" }
},
{
"scope": "entity.name.type.class.js",
"settings": { "foreground": "#d393e9" }
},