I am creating a library using angular CDK for custom modal. I want the application which would use the library to pass the CSS class name with other configuration for the modal window. So that I can apply the class like this in the library.
this.overlayContainer.getContainerElement().classList.add(modalConfig.overlayContainerClass);
I can see the class is applied to the element but no class present.
<div class="cdk-overlay-container overlay-material-design-theme mat-typography custom">
I have defined this in the application component CSS file.
.custom{
width: 100%;
}
The question is how the CSS which is present in the application component would be accessible to library component?
For css classes to work that way you have to put them in a place where view encapsulation is not present.
The place for that is usually in the src/styles.scss.
If you want more structure you can have them in another scss file that src/styles.scss imports.
Related
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.
I have a package/library (cs-clock) written in Angular to generate a UI Widget. This was published to a local repository. This library has some default styles within the library codebase.
Now I have another application where this library is used as an NPM Package via package.json. When the parent is trying to render the widget - The default styles are rendered from the library.
Now, I want to specify styles from parent to this library which means whenever a new theme CSS file is included in the parent, the child library should be able to render those styles.
I tried with the following options:
Using encapsulation property of Angular- By setting it to None and exposing classes
Using ::ng-deep, :host /deep/, :host >>>
Putting a CSS file in index.html of the parent with !important to the classes specified in it.
Unfortunately, These approaches does not seem to be the ideal one. Is there any other way through which my use-case can be achieved in a better way.
Any help is much appreciated.
I have a component that implements a lib that requires Bootstrap. But I don't want to apply Bootstrap to the rest of the project. So I imported the Bootstrap CSS inside the component style file. When I use this component inside another component, the style applies to the entire page including to other pages after I access the page that includes the component. I already have tried to use ViewEncapsulation options, but unsuccessfully.
Picture a more traditional web application that is slowly introducing a React component in one page that is complex enough to need it.
We're developing this new UI with Webpack, and we're using css modules for all the new css that the new UI needs. But we still need to reuse some css that's global and provided in the app via a traditional css stylesheet linked in the html.
Therefore we need in our css modules to occasionally write rules that refer to a css class in the global namespace, not a class that's locally scoped to it and therefore converted to a more gem-like long css class name when the app is run:
.container {
// rules for container
}
.container.pull-right {
// rules for when the container element also has the pull-right class
}
In the above example, container is meant to be a css class that the css module will contextualize to the particular component using this module.
But pull-right is a class that exist in a css file available in the page, but not processed by css modules or Webpack. Therefore we need a way (a syntax probably) to tell css modules "hey, leave pull-right as is in your output. Do not mess with it or try to BEM the s**t out of it".
I imagine something like this should exist, but I haven't been able to find it so far by googling around.
To refer to a globally declared class name inside :local scoped css modules you should use :global switch:
.container {
// rules for container
}
.container:global(.pull-right) {
// rules for when the container element also has the pull-right class
}
More detailed explanation in css-modules documentation.
I am currently in the process of creating a custom form component for my Angular component and am running into some styling issues.
I'd like for my input to be able to take variable widths and for them to be controlled by the host component.
For example: <my-input class="input"> would have a corresponding class as such:
.input {
width: 250px;
}
For some reason, if I do this, the rules are just ignored and not applied to my component.
I've seen others wrap their components in what seems like unnecessary divs and then styling those parent divs so that the content inside fits. I don't want to write wrappers just for styling purposes when a CSS rule would suffice.
Would doing this involve using :host ?
Also, how about, host-context(.input) and then applying the classes inside of the consumers CSS ?
I would advice against using ::ng-deep since the Angular team is planning on deprecating it.
If you want to style something within your component from whatever component is hosting yours I suggest you create a host-binding/input and then use that value to bind to your component using the style-directive.