I am working on a website made with Gatsby v. 4. On static pages the template expects a background image that takes up slightly less than half the screen. All background images are loaded via the StaticImage component of Gatsby's 'gatsby-plugin-image' plugin.
Is there a way to get this background image by using the height and width (or other) attributes of Gatsby's StaticImage component?
I am currently achieving this through an external .scss style sheet in this way:
img {
height: calc(50vh);
width: calc(300vh);
}
You have exposed an style or imgStyle props in both: StaticImage as well as GatsbyImage.
style: Inline styles applied to the outer wrapper.
imgStyle: Inline styles applied to the <img> element.
Source: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#shared-props
Depending on how's your JSX structure you may want to use one or another but answering your question: yes, there's no need of using an external .scss file, you can use inline styles as desired:
<StaticImage
imgStyle={{ width:"300vh", height:"50vh" }}
style={{ width:"300vh", height:"50vh" }}
/>
Use whichever works better for your scenario.
Related
Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.
Thank you
You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:
[part="input-field"] {
background-color: var(--lumo-base-color);
max-width: fit-content;
}
To set the colors for a disabled button, you can target it as follows:
filename: vaadin-button.css
code:
:host([theme~='primary'][disabled]) {
background-color: red;
}
And you get the following:
To change the primary color or any other global styling, explore your styles.css file.
For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming
Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.
I'm relatively new to angular. In the process of converting a React app to Angular just for learning purposes. I have a parent component that has a button (Custom Button Component). This button when loaded in the parent should be hidden and on hover should show the button. So you probably get an idea that I have some CSS selectors related to the parent component that override the child CSS. First should be display: none and then on hover I change it to display: flex
So the first problem I encountered was that I could not override the child CSS from the parent CSS. After reading all kinds of posts I moved the CSS overrides from the parent CSS to the global stylesheet and also added encapsulation: ViewEncapsulation.None to the child component.
Next thing I noticed is that the align-items: center was not working on the child. First thought I had that guess I have to add that part to the global styles also? but what I really need to know is that is this the norm in Angular? If yes, then some things don't make sense to me. These styles are really not global. They are only related to the parent component then it seems kind of weird to add those to the global stylesheet.
In regards to the align-items not aligning the child (custom-button), I believe that happens because of the extra div being added around the button. So how do you handle such situations?
Appreciate any advice/tips.
Thank you!
You can overwrite children CSS classes from the parent componet. this is the way:
Assuming your child component have this CSS
.child-class {
background-color: blue;
}
When you use this component the background color will be blue. But if you want to change that color to RED. In the parent component where you want the change you need to do this:
In your parent component
:host {
::ng-deep{
.child-class {
background-color: red;
}
}
}
:host this refers to the component's HTML tag (that is created by Angular, in your case the tag of the component that contains the app-custom-button). Also you can apply css to the component tag.
for example:
:host{
width: 100vw;
height: 100vh
}
And with ::ng-deep you can overwrite ALL styles inside your compoent. Does not matter if is a style from your child compoenent, grandchild, great-great-grandson, etc... even if its a component from an external library.
So... For example you can have the "custom background color as blue" then in one component you can keep that color but in other component you can change the color to red and in other component you can change the color to green....
Angular have the concept of ViewEncapsulation. By default, the value is set to ViewEncapsulation.Emulated and the css you put in the component is specific to the component and only to this component. The CSS will not be applied to the child components.
You can switch to ViewEncapsulation.None and you will disable this behavior and all the css rules in your css file will be applied to all your components in the application, and maybe you don't want this behavior. That's why I advice you to leave this option.
The other option you got is to put your specific css rule in src/style.css (if you didn't modify the default path). All css rules put in this file will be applied for all the application and you can keep the ViewEncapsulation of your component.
For align-items, i think you are right : the app-custom-button is wrapping your button, so you need to set a width: 100% to your button, then eventualy resize your app-custom-button
I know I can use predefined material design (or font awesome etc...) icons in Vuetify like this:
<v-icon>mdi-clock</v-icon>
But is there a way to use v-icon component to display my custom icon defined as svg in my-icon.svg file? This .svg file is located located in my project public/img directory but how can I reference it inside v-icon component?
AFAIK If you want to use as external svg, the answer is unfortunately no.
Anyway, you can import the svg file as a component with vue-svg-loader then use inside v-icon.
import Stack from "#/icons/stack.svg"; // import /src/icons/stack.svg
export default {
components: {
Stack
}
};
Then use it
<v-icon>
<Stack/>
</v-icon>
Another solution How To Add Custom SVG Icon in Vuetify - Vue.
You can achieve the same using CSS.
.v-icon
height 20px
width 20px
&.engine
background-image url(https://www.svgrepo.com/show/9344/train.svg)
background-size contain
background-repeat no-repeat
&::before
visibility hidden
content ""
check out this codepen.
I am using PrimeNG for my project I used p-dropdown with appendTo body only for particular components files, and I changed the css in only one file as follow, for example
geneFinder.component.scss
.ui-dropdown-panel {
z-index: 999 !important;
}
and component file is
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body"></p-dropdown>
But this css is affecting in all other files also. If I removed the !important it is not affecting in other pages and this is not working with particular component itself. How to fix this issue.?
you can try this
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" [style]={'z-index':'999 !important'}></p-dropdown>
You can also customize the z-index with the p-dropdown attribute baseZIndex. This way, you don't need to set it in css, and it affects only the dropdown where the attribute is set.
Angular is a single page application framework hence all the CSS would be combined and CSS styles will be created inside style tag of the single html page. If we are having a CSS class with name that is common to other component's elements it does affects it.
In case of component specific CSS, create a custom class name something like,
.mycomponent-ui-dropdown-panel {
z-index: 999 !important;
}
and add the class to the element of the component's html where we need this change to be applied. This will make sure that other elements of other components are not affected by the CSS style.
I fixed the issue by adding the panelStyleClass in my component,
<p-dropdown [options]="geneoptions" formControlName="gene" appendTo="body" panelStyleClass="overlay-zindex"></p-dropdown>
.overlay-zindex{
z-index: 999 !important;
}
I created a simple React app using https://github.com/facebookincubator/create-react-app.
I am trying to specify a configurable URL to a component's CSS like this:
.Cell {
background-image: url({process.env.REACT_APP_STATIC_URL}./someImage.png);
}
And here's the component:
import React from 'react';
import './Cell.css'
class Cell extends React.Component {
render() {
return (
<div className="Cell">
{this.props.name}
</div>
);
}
}
But it doesn't look like the process variable trickles down to the imported CSS. How would I go about doing this?
If you want to use js variables in CSS, try React inline-style instead of plain css file.
https://facebook.github.io/react/tips/inline-styles.html
If you want to separate CSS and JS, you might need a CSS preprocessor to manage your global variables.
I came across one such scenario, The method I used is instead of adding it as background in CSS, make an img element and assign the path as src in component itself. I don't think there is any other way of doing that.
Commenting on this as I've recently had a similar issue. This should work to send an image file as a CSS variable in a build.
use the style prop to invoke a CSS style
Use template literal around the url() value
use the Javascript require() to refer to the file in the final build pack. Using a relative url requires that you call the image relative to where the the page will be called instead of being relative to the component JS file.
In the React component, use the inline style prop to set the CSS variable:
<div
style={{"--img":`url( ${require("../../images/coding.jpg")})`}}>
</div>
in the CSS file:
background-image: var(--img);