如何防止 Css 应用于其他文件？

Question

In this React Component I have Cookbook.js and Cookbook.css. I have a bunch of styles in Cookbook.css and specifically it has

form {
    display: inline-block !important;
    padding-top: 30px;
    margin-left: 100px;
}

Which is fine since I import that into the Cookbook.js. But I created another Component called Survey.js along with Survey.css. In Survey.js I use a form as well but I ONLY import survey.css. Yet for some reason, The CSS from Cookbook.css gets applied to the form in my Survey.js. As a result, my form on Survey.js is in a odd spot. How Can I ensure that the css for each form is independent of each other?

Answer 1

When you create CSS rules, it is often easier to use class names instead of id's. Such as:

.class {
 background-color: blue; 
}

When you have common elements across multiple components, the CSS color will apply the styling to all elements such as:

p {
 background-color: blue; 
}

If you want to differentiate the styling where it applies in one component but does not apply to another which I think you are trying to do in your case, you need to use id's instead of element or class names.

Add an id to the component that you want to style and create a rule for that element such as:

#hero {
 background-color: bluel;
}

This should be able to ensure that CSS is different from each other.

Answer 2

I think that you are looking for CSS modules. CSS modules are CSS files that only apply to a single component. Here is an example: https://css-tricks.com/css-modules-part-1-need/ . More about CSS modules can also be found on Google and other forums.

Thank you,

Caiden Sanders.

Answer 3

In React when a component is mounted, its specific CSS file is also imported. You should know that React makes only a single HTML page application. In one HTML page if you import multiple CSS files and if they have conflicting CSS, then CSS will be applied on the basis of priority.

CSS that comes last overrides existing if common elements conflicting unless you haven't used !important with any property.

So, you should use unique ids or classes to prevent conflicts wherever required, and use common CSS if you have similar behaviour for certain elements.