Are there any method to ignore the css affections of other leaf pages and parent pages to my react p-CodePudding

I'm developing a react application with my group as a beginner. Previously it was all ok. but when we intergraded that there were several CSS issues happened by applying all CSS scripts to all the frontend pages even though we have called them at the leaf most nods. (Ex. My friend has added her own CSS scripts(pages) at here end to the java script pages and I have added my CSS pages at my java script pages, even though both of those pages are not connected the applied CSS pages are affecting to the whole project, even for the parent pages also)

It's difficult to make the project again by calling class names one by one again.

There may be easy method to ignore this CSS affection?

CodePudding user response：

If you are working in component A, you can add a className or id to it. based on that you can separate the css.

const A = (props) => {
  return (
    <div className="A">
      <h1>Hi {props.name}!</h1>
      <div>Welcome to React</div>
    </div>
  );
};

If you want to use css only for component A, you can add like

.A div {
  color: #bbb;
}

Even your class names are same accross the application, This will affect only your component.

Until the same parent name (component name) exist, it won't affect any other pages.

CodePudding user response：

Assuming you could set a unique class or id on that element you could use the (limited browser support) property all and set it to unset or initial

Something like

<div class="ignore-css"><div>

and

.ignore-css{all:unset;}