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%;
}
`
Related
So I am using react icons and I have two different icons that I am styling with styled components. My issue is that they essentially have the exact same styles, but the only difference is which icon I am choosing to style.
I don't know how to combine both icons into one styled component
Here is my code
const backArrow = styled(IoArrowBack)`
width: 50px;
height: 50px;
`;
const forwardArrow = styled(IoArrowForward)`
width: 50px;
height: 50px;
`;
Since I am using styled components, I just pass the icon into the () based on which one I want to style. The issue is I have over 12 lines of the exact same styles for both icons. It doesn't make sense to repeat the exact styles
How would I create one styled component, but display two different icons?
Example concept like this
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
But then the issue occurs if I were to add them to my JSX
Cause then how would I even add the code?
I can't do
<arrrowIcon>Back arrow</arrowIcon>
<arrrowIcon>Forward arrow</arrowIcon>
So it wouldn't know which icon is which.
Is this even possible with styled components, or would I just have to copy and paste the same styles for each icon?
This piece of code is a bit weird to me, I think this is not a valid code
const arrowIcon = styled(IoArrowBack, IoArrowForward)`
width: 50px;
height: 50px;
`
However you can do a trick to get a shared style
const sharedIconStyle = css`
width: 50px;
height: 50px;
`
And
const styledArowBack= styled(IoArrowBack)`
${sharedIconStyle}
`
const styledArrowForward = styled(IoArrowForward)`
${sharedIconStyle}
`;
Could you just do it with React?
import React from "react";
import "./styles.css";
import { ReactComponent as icon1 } from "./icons/1.svg";
import { ReactComponent as icon2 } from "./icons/2.svg";
export default function App() {
return (
<div className="App">
<SizedIcon Icon={icon1} />
<SizedIcon Icon={icon2} />
</div>
);
}
const SizedIcon = ({ size = 50, Icon }) => {
console.log(typeof Icon);
return (
<div>
<Icon width={size} height={size} />
</div>
);
};
What I did is wrapped the icons in a div and styled the div, for example change the icon colors to red:
const IconStyles = styled.div`
color: red;
`
<IconStyles>
<IoArrowBack />
</IconStyles>
<IconStyles>
<IoArrowForward />
</IconStyles>
If you want to change the size of the icons then add a font-size in the div containing the icons, that is how I personally do it.
import { ReactComponent as SVGTest } from '../images/299.svg'
Is there a way to extract the width from the SVGTest during the return.
I want to compare the default width of the SVG vs the width of the window. If less than I want to use the SVG width.
At the moment I set the width to 290px for ALL hundreds of SVGs in the App and the height adjusts accordingly.
However some SVGs are wider and for those I would prefer to use its width over my default 290px.
You should avoid hardcoding your SVG, also it's a good practice to treat SVG as a component.
Try resetting your SVG's width, height with CSS and use viewBox for scalling.
This way it will scale its container (Box in the next example)
const Box = styled.div`
width: 300px;
background-color: palevioletred;
`;
const SVGContainer = styled.div`
svg {
width: 100%;
height: 100%;
}
`;
// Default width,height of SVG are 100px
const App = () => (
<Box>
<SVGContainer>
<SVG />
</SVGContainer>
</Box>
);
I use the reakt photo gallery library; my component gets an array of images as props and converts it into an array of objects with fields {src, width, height}. Everything works well, but the problem is that I have a specific height for the block, into which the gallery should be inserted. the height of the block is significantly less than the height of the entire block of the gallery, so I assumed that the pictures would scroll horizontally, and they still continue to scroll vertically, how can I make a horizontal scroll?
import React from 'react';
import Gallerys from 'react-photo-gallery';
const Content = styled.div`
height: 700px;
width: auto;
overflow-x: scroll;
img {
border-radius:10px;
}
`;
class Gallery extends React.Component {
render() {
return (
<Content>
<Gallerys direction={'row'} margin={40} photos={images} />
</Content>
);
}
}
export default Gallery;
please check the answer here https://codesandbox.io/embed/lively-sun-zqe7g
Note: Use this in your style.css/ style.scss
//use in css
.react-photo-gallery--gallery div {
flex-flow: nowrap !important;
}
//use in sass/scss
.react-photo-gallery--gallery{
div{
flex-flow: nowrap !important;
}
}
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
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.