I have a component folder and two different components in it, every component has its own css file with the link in its jsx file.
:
when I use a the same class name in them it affects the other component too! While the other component has its own css file and link.
Why is that?
For example:
In both components I have a class named: "PlayerPhoto"
when I change its height and width, the photo in other components (with separate css file but the same class name) would change too!
It happens because your css is imported simply as normal css - without unique identificator. You need to specify classes with unique names or have a look at Css Modules which solve this problem and creating unique classes automatically
Or you can use libraries as EmotionJS or styled-components
Your app.js file may has the property for the className="PlayerPhoto", make sure that your app.css has not the same className if there were, then it overwrite your component base css.
You can also use inline css, to overcome this type of issues.
Related
I have a component. For this component I created css file with the description for the class "active" and imported it into the component. Also in this component I use NavLink from React Router. And NavLink gives for an element class "active", when user tapped this element.
In other component, which is fully separate, I also use NavLink. And there I didn't import css file with "active" class description. But all styles from the class "active" from the first component works also here. It means elements in this component don't look like they should.
Why it works so?
And how I can make css file separate for each component?
Thank You.
Because you gave them the same name, if you'll read how "Bundling Assets" work what it does it compiles everything in the project and everything that got the same classes name will work everywhere.
I've noticed it when I had two different files of CSS for two different components but for the reason I wrote it took the CSS design from the other file.
Then I changed the name of the class to something else and it worked.
Because react is put all css files in one file, and when that happen the classes with the same name override themselves. Read about "bundling assets and how it works".
There is two method i know to avoid this issue :
1. don't write the same class names :
We suppose that you have two js files, "about" and "home", write the css classes in this way : .about-paragraph{...}, .home-paragraph{...} ....
2. Use Module:
create the css file and name it about.module.css, and put the classes like you want.
In js file import it like that :
import styles from "./about.css";
And use it with jsx like that :
<div className = {styles.paragraph}>
...
</div>
in my react project, in the SRC directory I have components directory, which contains components folders, every component folder has react component (JSX) and a CSS file, I found that the CSS styles in a component folder overlap with other components styles, although I'm only importing it in the JSX file that I want to use the styles for, why is that happening? like I want to have a CSS file for every component separately
Do you have experience in pure HTML, CSS, and JS before? CSS rules are global.
The closest to what you are looking for is CSS module, if you are using Create React App, it is supported out of the box.
At the end of the day all your styles are compiled into a global stylesheet, specifically in multiple style tags spread across the application which are scoped to the global app.
If you need to scope styles to components, you need to use something like styled components.
Take a look at this post that might help you understand it better.
https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/
I want to apply one CSS file to only on Home.js component. I don't want this CSS to be applied to other components. For other components, I have a CSS file. But when I apply that CSS file to Home.js, it also applies to other components, and it mixes everything.
Once a css file is loaded it is accessible in all files. If you need to avoid the style being conflicted, it would be better to create a unique id/class name or use inline styling
Angular cli automatically loads css files those are in node_module directory. I am using #swimlane/ngx-dnd and it has css style. But I want to use bootstrap styles for my components. What's standard way for doing this ?
Appreciate any idea and helps.
In your app.component.ts, add:
#Componenent({
encapsulation:ViewEncapsulation.None,
styleUrls:[''], // Add your bootstrap css files
templateUrl: ....
})
If you want to override a package's styles, you can just provide overrides in your own stylesheet or component stylesheet with the same or more specific style definition. Your definition will need to match their style, but must be loaded after their style and/or be more specific so that your style applies correctly.
If you want to exclude their style sheets you will need to use some sort of plugin for webpack to Ignore the css files in the package directory.
I'd recommend the first approach.
If the package you are using creates dynamic markup along with the styling, you may need to change your component encapsulation so that the component you are using can successfully apply your styles to the generated dom elements.
I have a web page, Page-A, that uses a primary css file. I have other pages, Page-B, that use another primary css file. I'd like to use two classes of the Page-B css file into Page-A, but I do not want to override other classes and functions of Page-A css with this Page-B css file.
Is it possible to import only two classes of a css file instead of all its classes. In other words, is it possible to constrain an #import or link to load only a few classes?
What you could do is mark the classes that will be overriding everything with the !important tag in CSS, which means that it will not be overridden.
I would just input the two classes you want into the Page-A css file, as there is unfortunately no way to just import certain classes.
I would suggest making one master CSS file and input into both pages, that way all of your changes are reflected on both pages.
No. It's not possible.
But: You can still prefix your CSS rules with a class or an ID. It can helps you work with specificity (http://bit.ly/1aODhdu) and with rule importance.
You can also prefix CSS rule which will be applied-only for some nodes like html.one div html.two div so after load second CSS file will be still ignored.
No, it is not possible to import specific classes from a CSS file.
The correct way to do this would be to create a master CSS file, which all your webpages can share.
Delete the classes you need from PageBs css(OPTIONAL), add them to a new CSS file.
Link the new file to both the pages.
This way you will not override any classes and have a CSS file which has all the shared classes both pages need.