I'm using Angular 15 and #angular/material. I've created a standalone component that uses the mat-dialog-title, mat-dialog-content, and mat-dialog-actions. This component, as you can probably tell, is being used with the MatDialog. Unfortunately, when I render the component in the dialog, some of the css variables coming from material are undefined for some reason, while others are not.
I'm not sure what I'm doing wrong or why some of the variables would be defined, but not others. This is causing the styling to look pretty weird. Is there a dependent module I need to import besides MatDialogModule in the standalone component?
Since the component is standalone, I figured this didn't matter, but the component is located in a separate library project (exported from there).
Related
I am learning react in which I am making components and making css file for each component but if I make a className lets say "temporary" then if I make another component and while I am not importing the previous component's css file but then also if i give the class "temporary" to any other element of this component then also it take the css styling. Why is this happening I don't know.
You create multiple CSS files and several components in your React project and connect them if needed.
But this is what you see, not what happens.
React actually converts all your CSS code into a file and then outputs it.
This is also true for components.
You create dozens of CSS and JS files, but React creates two files for you.
In Recycling, we only create a few files to write more readable code.
If you have a problem with this, you can research the module.css in React and use it to prevent this from happening to you.
Again, if you have any questions about this, I am at your service.
Just recently I have begun working with React, and to some extent front-end development. I am using the Material UI framework to develop an application, and I have chosen to use its "styling with JavaScript" approach: styles are defined as JavaScript objects, rather than traditional CSS, for example. All good so far.
I have my components in a component directory, and in a separate directory called style I have a matching file for each component where I define the useStyle hook (per component). That way, each component's style is defined via a unique import.
Now that I am integrating a non-Material UI third party library, the styling it ships with is defined with CSS, so I can just import the CSS file in my React component file to use the styling. But now I end up with a mixture of styling techniques.
Is there a single, consistent, and recommended approach for styling React applications? Is using multiple styling techniques recommended?
I want to create a web component using svelte. To create a web component it's necessary to include the svelte tag option
<svelte:options tag="{"my-custom-component}"></svelte:options>
It creates a custom component with that name but doesn't work properly because we have to provide this tag for all the child components as well! I added it to all the child components but it still doesn't work, turns out I use third-party libraries and I don't know any way to have that option there!
Is there a way to create the custom components with svelte which includes third-party libraries?
You can use regular svelte components (including third party) ones inside your component.
But you'll need to compile those with different compiler settings in your rollup/webpack config.
And due to the nature of scoped styling in web components (Shadow DOM) the css won't work in these components. So it depends on the library if it still works.
You might be able to turn off scoped styling in the future:
Issue #1748: Custom element without shadow DOM
But scoped styling could have been the reason why you wanted/needed webcomponents in the first place.
I am working on a Vue component that is going to be shared between two different platforms (Web/Mobile). I also want the component to have the same style/look on both platforms. Each platform is using a different CSS framework.
What is the best way to go about making the style/look the same? Without having two completely different components.
I can think of a few options
Having a prop to set the style
Two different templates and use a mixin
Similar to 1 but have a CSS module that can be toggled
Scope the style so it is not dependent on the platform css framework
I am using styled-components in a React project. So far it has been working fine, but now I want to use the react-datepicker package, which requires its styles to be imported the following way:
import "react-datepicker/dist/react-datepicker.css";
However, importing the file causes an error that says "You may need an appropriate loader to handle this file type". I know I could fix this by creating a handler for .css files, but I thought I could avoid that by using Styled Components.
My question is, is there a way to handle these type of imports with styled components? I've been loooking online for hours and can't seem to find a way.
I ended up just forking the project and changing it to use styled-components instead of needing to import the styles.