I have a styled component which I pass a url to be used as a background image but it does not work. I've seen other similar questions but nothing has fixed it.
My styled component:
export const BackgroundImage = styled.div`
background: ${props => `url(${props.background})`};
background-position: center;
background-size: cover;
`;
I use it like this:
<BackgroundImage background="https://imageurl.jpg" />
When I look at the developer tools in the browser I get this:
So it looks like it has complied correctly but you can't actually see the image on the page.
I tested it right now and I think the problem is here that <BackgroundImage/> - Component does not have any height?
As soon as i give it a height e.g. height: 100vh; it's working fine.
Related
This is my code and somehow I am not able to get the image loaded.
import React from 'react'
import styled from "styled-components"
function Section() {
return (
<Wrap>
</Wrap>
)
}
export default Section
const Wrap = styled.div`
width: 100vw;
height: 100vh;
background-image: https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing;
`
What should I do?
For the direct link of an image stored in Google Drive:
https://drive.google.com/uc?export=view&id=file's ID
So the URL of your image should be:
https://drive.google.com/uc?export=view&id=1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG.
Then, use it via CSS background-image: url('https://drive.google.com/uc?export=view&id=1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG')
See, Displaying files (e.g. images) stored in Google Drive on a website
When you use background-image, you should use url() with URL.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
const Wrap = styled.div`
width: 100vw;
height: 100vh;
background-image: url("https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing");
Edit
Your Url is not Image so you can not load image with your Google Drive Url.
You have set the wrong value for the CSS property.
✓ Use This:
background-image: url("https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing");
✘ Instead of your this code:
background-image: https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing;
As in your current question I see you have forgotten to put url().
Hope all are doing good. Apologies this is repeated or seems silly.
I have a functional styled component to render a input type image called LinkedInInput.jsx.
const LinkedInInput = styled.input`
left: 20%;
position: absolute;
top: 7%;
height: 6%;
font-size: 2.4vw;
background:url(${(props) => props.src});
#media (orientation: portrait) {
top: 10%;
left: 19%;
height: 6%;
position: absolute;
}
`;
This component getting rendered from the index.jsx like below:
```<LinkedInInput src={linkedInURL} type="image" onclick={linkedInLink}></LinkedInInput```
When this component rendered on webpage, I'm not able to see the onclick attribute on the input type and that is not clickable as well. Can you please tell me how to make sure that this component is clickable and opens the link.
Try changing onclick to onClick.
refer this.
https://reactjs.org/docs/handling-events.html
https://www.smashingmagazine.com/2020/07/styled-components-react/
I'm currently using VideoPlayer from react-video-js-player and I'm trying to override the default height/width styles to have the video inherit the parents height/width.
Since VideoPlayer is simply React wrapper for VideoJS. I assume the styles and class names are the same.
I tried doing something like this:
import VideoPlayer from "react-video-js-player"
export const VideoJS = styled(VideoPlayer)`
position: relative;
height: 100%;
`
Setting the height and width to be 100% in the props doesn't work
<VideoPlayer
controls="true"
height={"100%}
width={"100%"}
src="examplevideo"
/>
.
the parent container is set to 100% width and height.
Any ideas?
I would do something like this , first inspect the video player element in browser to know what is its wrapper, let's say its a div . you can do something like this :
export const VideoPlayerWrapper= styled.div`
>div{
//this will target the videoPlayerwrapper
position: relative;
height: 100%;
}
`
I am trying to add background-color through styled component.
If add the styles through style={} attribute it is working as expected but If I add the same style in my styled component file it is not working.
//this is working
<MyStyle style={{backgroundColor: '#fff' }}>
//some component here
</MyStyle>
//This is not working.
export const MyStyle = styled.div`
background-color: ‘#fff’;
`;
Can somebody point me here what I am missing here?
The first example is simply using the react style builtin, you don't need styled components to do this.
The code in the second example, you need to remove the quotes around the color, like this:
//This is not working.
export const MyStyle = styled.div`
background-color: #fff;
`;
Styled components takes css syntax, which unlike json syntax, does not have quotes around option names, color names, etc.
You don't have to put single quote around #fff
export const MyStyle = styled.div`
background-color: #fff;
`;
EDITED:
If there are overriding CSS styles that make your div's background not white just yet, and you can't find them, just add !important to this style
export const MyStyle = styled.div`
background-color: #fff !important;
`;
Regarding the issue about finding existing CSS styles that might be overriding your preferred style, take a look at this: https://www.styled-components.com/docs/advanced#existing-css
today i have a question concerning the REACT package styled-components.
What I'm trying to accomplish is to create a styled div-component, which will be used as a parallax-container and has to load a certain image as its background.
Now I could probably just import the image into the file and call it using ${imgComponentName} while being inside the styled.div.
But I'm trying to be able to load the same Parallax-component with multiple images, whose names i want to pass as a prop on calling the Parallax-component like <Parallax bgi="mountain">.
My current code looks as follows:
import PropTypes from 'prop-types'
import styled from 'styled-components'
import hills from '../static/img/home/hills.jpeg'
import mountain from '../static/img/home/mountain.jpeg'
const bgi = props => props.bgi ? props => props.bgi : "mountain"
export const Parallax = styled.div`
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
background-image: url(${bgi});
background-attachment: fixed;
background-size: cover;
flex-direction: column;
`
Parallax.propTypes = {
bgi: PropTypes.oneOf(['mountain', 'hills'])
}
Is there a way of calling the imported image by its name with the string, that was passed as the prop bgi?
Best regards,
Patrick
P.S.
I'm aware of the extend-syntax, but i wanted to try to solve the problem trough one styled component.
You can use require like this
const bgi = props => props.bgi ? props => require(props.bgi) : "mountain"
or
background-image: url(${require(bgi))}
I am not 100% sure, but I think you have to pass the props someway different. You have to remember, that you are actually only passing a string, that gets converted to a css class in the DOM and returns a React Component.
For example this docu here: https://www.styled-components.com/docs/basics#attaching-additional-props
maybe something like this:
const Parallax = styled.div.attrs({
url: props => props.bgi ? props => props.bgi : "mountain"
})`
background-image: url(${props => props.url});
`;
Did you try to inline it? Like this:
const Parallax = styled.div`
background-image: url(${props => props.bgi ? props => props.bgi : "mountain"});
`