reactjs - CSS conflicts in react

Question

How to use normal CSS without using any modules or external dependencies like CSS module or styled-components in React avoiding class name collision or CSS overriding to other components?

question from:https://stackoverflow.com/questions/65879570/css-conflicts-in-react

Answer 1

There are at least two ways:

• to scope it under a class name, for a certain component:

  .employee-data .warning { ... }

• to scope it under a certain page

  #about-us-page .photo { ... }