How can we apply css files or import css files conditionally in angular.
Note: We should have multiple css files and on condition it should apply the css file to the angular component.
In how many ways can we achieve it? any approach could be usable.
You can use ngClass directive:
<div id="mydiv" [ngClass]="{'myCSSclass' : condition}"></div>
Related
I'm new to React. So I found out that there is a CSS mixing problem going on in my React code. So I used CSS modules to solve that problem. But when I'm doing a frontend React JS project with Bootsrap, I came up with this problem.
So In this Carousel component, there are hidden(those are only shown in compiled HTML files) CSS classes called carousel-control-next and carousel-control-prev. So I need to change their CSS styles with CSS modules. So how can I access them?
I imported this CSS module file as a CSS module in my React file, but it's not working. Can someone help me with this problem? Thanks in advance.
You have to use :global to get not modular styles such as styles for Carousel
https://github.com/css-modules/css-modules#exceptions
I have a couple Angular components spread out over multiple files, created using ng generate.
Some components have inline styles, since the html/styles can be quite small so it makes sense to use inline templates here.
The issue is that I'd like to translate a couple of these 'multi-file' components to inline styles - is there a way to do this within the Angular ecosystem?
You should go in .ts file of the component and inside of the #Component decorator change the templateUrl to template, and styleUrls to styles. Then you can delete .html and .scss files and transfer their code in .ts file.
#Component({
selector: 'app-custom-component',
template: `<div>Your component inline HTML.</div>`,
styles: ['div { text-align: center; }']
})
If you want to generate a component with inline templates and styles, you can do that with passing --inlineTemplate=true --inlineStyle=true option to the CLI when generating the component:
ng generate component custom-component --inlineTemplate=true --inlineStyle=true
I have designed a web page in ReactJS using CSS. For one of the component I have used Bootstrap for styling. I garbed the latest bootstrap cdn link and pasted it in "index.html" file. When I use that bootstrap link, it overrides few of my custom styles. Each component of my project has a separate CSS and JS file. Please suggest any solution, where should I put that bootstrap link in my project so that it doesn't override my custom css styles. Thanks.
It's smell like wrong css include order. You may check it in browser. To resolve this, you can go through few ways:
Try to include bootstrap css as very first link in head section (after meta).
Try to include your css via import in your index.js file.
Second way should be look like this:
import "https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css";
import "./styles.css";
It’s very simple. Link your custom CSS file just below the bootstrap.css and override the class in your custom.css file.
You can rely on descendant selectors, ID and ‘!important’ notation together to override the styles but that is against the CSS best practices. You can use them only when it is absolutely necessary.
You can simply use this method. Follow the following articles. I hope you help this.
Override Bootstrap CSS styles
CSS Overrides
I am using react-table to create a filterable table, however I wanted to style it the way I want. Should I change it directly inside node_modules application or should I create my own CSS file and override inspecting the element on the fly?
For React-Table v6, you can basically do it in 2 ways if you want to use css files.
Start with the css file from the npm package and override pieces you want to change
Start with your own css file and style everything that needs to be styled
Ad 1:
import "react-table/react-table.css"
import "./your_own_styles.(s)css"
Ad 2:
import "./your_own_styles.(s)css"
To get an idea what you can use in your own css file you can have a look at this gist: https://gist.github.com/sghall/380aa1055bcad4db22d1fc258d7f09d0
Or start by copying the react-table/react-table.css from the react-table npm package (in your node_modules).
Definitely do not change the node_modules. You can either style inline or attach styles.
https://reactjs.org/docs/faq-styling.html
Definitely override the CSS classes with your own file. That's common practice for styling components from libraries.
I recently discovered Vue.js.
I use it with the single file component architecture and I noticed that all my components' styles are all loaded in the page (even those which are not active).
Is there a way to only load current components' CSS, and avoid code repetition?
You can use the scoped attribute to make styles only apply to the current element:
<style scoped>
.class{
//will only apply to this component
}
</style>
Webpack will concat and minify all your sources (even if they are scoped).
CSS across all components extracted into a single file and minified with cssnano.
I don't really see the use case where you'ld need to split your CSS into separate files.