In Vue, if two DOM elements have the same class name, the latter style overwrites the former style, so you can add scope to the style in the Vue component file, and Vue will automatically compile for you without causing style conflicts. In React, there is a similar problem. We can modularize CSS styles. For example, if a component’s style file was originally named index. CSS, we can modularize it to index.module. CSS. However, the writing method needs to be modified slightly, as shown in the figure.


Note the red box position


Next, show a file comparison of the two components


Anyway, the contrast should be clear. Finally, a small vscode plugin is recommended to make react development easier.

In the React empty component file, type RCC and press Enter. For more instructions, see the plugin introduction.