Standalone component in Angular Material may experience undefined CSS variables

Currently, I am utilizing Angular 15 in conjunction with @angular/material. One of the features I have implemented is a standalone component that incorporates mat-dialog-title, mat-dialog-content, and mat-dialog-actions. This particular component is designed to work alongside MatDialog. However, upon rendering the component within the dialog, I've noticed that certain CSS variables sourced from the material library are undefined while others remain unaffected.

https://i.sstatic.net/PUi2o.png

I am perplexed as to why some variables are defined and others are not, leading to an awkward appearance in terms of styling. Could there be another module dependency that I need to import aside from just MatDialogModule in the standalone component?

Initially, I assumed this wouldn't be an issue since the component stands on its own. However, it's worth mentioning that the component resides in a separate library project (where it was exported from).

cssangularangular-materialcss-variables

Answer №1

After encountering the same issue with Angular Material version 16.1.6, I spent hours scouring through the SCSS files of @angular/material in search of a solution, but to no avail.

As a last resort, I decided to upgrade to the latest version of Angular Material (in this case, 16.2.0), and miraculously, the CSS variables appeared.

Upon examining the changes, it appears that they had removed some outdated components. Unfortunately, the exact cause of the issue remains unclear.

Answer №2

Dealing with the same problem, I found a solution that worked for me. I needed to address the issue of undefined variables in my src/styles.scss file right after the "include" statement that brought in my theme definitions:

...
html {
    @include mat.all-component-themes($light-theme);

    /* Set variables here: */
    --mdc-dialog-supporting-text-line-height: 14px;
    --mdc-dialog-supporting-text-size: 14px;
    /* and so on */
}
...

Answer №3

I am encountering a similar issue.

In an attempt to define custom CSS properties within the SCSS file of a standalone component, I have structured it like this:

:root {
        --card-padding: 32px;
        --card-padding-half: 16px;
        --card-padding-xs: 16px;
}

Strangely, I am unable to access these custom properties even within the same Angular component SCSS!

=> It appears that Angular is performing some sort of manipulation with the ':root' pseudo-element when functioning within a standalone component.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to solve the JavaScript error provided below?

My objective is to create a new variable called theRightSide that points to the right side div. var theRightSide = document.getElementById("rightSide"); Once all the images are added to the leftSide div, I need to use cloneNode(true) to copy the left ...

javascripthtmlcssweb

What would be the best dimension for an Angular 11 module?

Picture yourself developing a brand new modular app in Angular and facing the decision of when to create a new module. Is it considered best practice to create a module per page if the pages do not have common components? Is there an optimal size for Ang ...

angularangular11

Angular Module Federation -- The shared module is currently inaccessible for immediate use

Encountering a problem while attempting to execute tests on my Angular microfrontend for use within Module Federation. Using Angular 12 and Webpack 5. Uncaught Error: Shared module is not available for eager consumption: 5487 Any suggestions on how to co ...

javascriptangularwebpack-module-federation

the process of extracting data from a request body in Angular 2

After creating a URL for end-users to access, I wanted to retrieve data from the request body when they hit the URL from another module. The process involves fetching the data from the request body, passing it to my service, and then validating the respons ...

javascriptangulartypescriptangular2-servicesangular4-forms

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

javascripthtmlcss

Tips for avoiding cursor sticking in css rotate transform in firefox?

I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle. Check out the code snippet here. While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in ...

javascriptjquerycss

Tips for passing operation enums within Angular services

Currently delving into Angular development and finding myself in need of a way to send a get request with enums included in the API call. Any insights on how this can be accomplished would be greatly appreciated! ...

angularserviceenumsget

CSS: Card elevates when keyboard is activated on a mobile device

[view image 1[view image 2] Image 1: Normal View, Image 2: When the keyboard is enabled, the card jumps up and when I close it's normal. Is this behavior normal? Or is there a fault in my CSS? I utilized styled-components for writing the CSS. CSS ...

cssreactjsflexboxstyled-components

Currently at the beginning stages of mastering CSS and encountering difficulties with the display property

I am facing an issue with my code .name-bar, .email-bar { border-color: gray; border-style: solid; display: inline-block; } .email-bar { margin-top: 5px; } .div-one, .div-two { border-color: gray; border-style: solid; width: 200px; h ...

htmlcssdisplay

What is the best way to implement a scrollbar in a specific div rather than the entire window?

Hey everyone! So, I have this window in electronJS with a div where I'm dynamically adding elements using Javascript and the function --> document.createElement('section'). Here's the loop in Javascript to add these elements: for ( ...

javascripthtmlcss

How to toggle the visibility of checkboxes in JavaScript based on their checked status

I am facing an issue with some checkboxes as I am unable to filter them based on whether they are checked or not. The concept is simple. When I click on "All", all the checkboxes should be displayed. However, when I click on "Selected", only the selected ...

javascriptjqueryhtmlcsscheckbox

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

htmlcss

Comparison of Head.js screen size and CSS3 @media query: benefits of prioritizing the former

What are the benefits of using Head.js screen size detection instead of CSS3 media queries? Head.js Screen Size Detection .lt-1024 #hero { background-image: (medium.jpg); } CSS3 @media query @media only screen and (max-width: 1024px) { #hero { back ...

csshead.js

Safari making menu mysteriously disappear

Currently experiencing an issue on this website: specifically in Safari. When I click on "KUNDEN" in the navigation for the first time, the entire header disappears. I checked the dev console and noticed that the header content is loaded, even in the sourc ...

csssafariinvisible

What is the best way to create rounded edges for a spinning spinner using CSS?

Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect? .loader { position: relative; border: ...

jqueryhtmlcsscss-transitionsloader

The Angular RouterOutlet exhibiting a diverse array of components

app.component.html includes the standard layout and the Routes configuration looks like this: const accountRoutes: Routes = [ { path: 'login', component: LoginComponent, pathMatch: 'full' }, { path: 'register', component: ...

angularroutes

The background image is not displaying properly on the responsive.css file

Having an issue with an image not loading in my responsive.css code. I am attempting to change a background image based on different resolutions of the website. The path to the image has been checked and it is in the same file that contains HTML, CSS, and ...

htmlcssresponsive

Angular-Phonegap - The issue with "min-height: 100%" not functioning properly

I am faced with this specific HTML file: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- NOTE: Make sure to remove the width=d ...

htmlcssangularjscordova

disable td's from moving when hovered over

When you add a book, you will see the item added to the table with a cool font and an X icon for removal. However, I noticed that when hovering over the icon to increase its size, it slightly shifts the text in the other cells. Is there a way to prevent th ...

javascriptcsshtml-tablehyperlink

Issue with binding background images to DIV elements in Angular 4 CSS

Here is a template example: <div [style.background-image]="profileImage" ></div> In the TypeScript file: We declare private profileImage: any; and use DomSanitizer for security. Fetching photo from service: We set this.profileImage using b ...

cssangulartypescript