I am using the #draft-js-plugins/image to display image in my react application. It is working but I can't seem to understand how to style the plugin so as the style my images that are displayed. I read through the documentation and I read that:
The plugin ships with a default styling available at this location in the installed package: node_modules/#draft-js-plugins/image/lib/plugin.css
When I checked this location, the plugin.css is empty. How do I apply style to the images that are displayed by the plugin? My images are covering the entire page.
You can target the images inside the draft.js editor on your component stylesheet. Here is an example screenshot using scss:
Screenshot: targeting draft.js editor using scss
Here is the code block
.DraftEditor-root {
figure {
margin-block-start: .5em;
margin-block-end: .5em;
margin-inline-start: 0;
margin-inline-end: 0;
}
img {
width: 100%;
// height: 200px;
object-fit: cover;
}
}
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%;
}
`
Here is my react page:
import { motion } from "framer-motion";
import styled from "styled-components";
const Outer = styled(motion.div)`
height: 100vh;
display: flex;
place-items: center;
background-color: #232323;
`;
const Inner = styled(motion.div)`
height: 100px;
width: 100px;
background-color: cadetblue;
border-radius: 5px;
`;
const Framer = () => (
<Outer>
<Inner>
Hey
</Inner>
</Outer>
);
export default Framer;
This is located under the /pages folder in a next.js app.
With <Inner>Hey</Inner>, it all works fine, but change this to <Inner /> and it consistently gives me Uncaught TypeError: Cannot read property 'textContent' of null when rendering on the server.
This has been a consistent problem whilst I'm getting to grips with next.js. It's hampering my production.
Error is reproduced on next.js#9.2.0 and next.js#9.1.7
<Outer>
<h1>Hey</h1>
<Inner />
</Outer>
Tested with above and renders fine. It would seem next.js pages need a little bit of text!
This error can also easily happen when you create a _document.js file and forget to include there NextScript tag. Happened to me - so I better post it here.
Removing the google chrome extension JSON Viewer Awesome seems to have fixed this.
Parses as JSON without text, but renders markup with text.
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.
I am using styled-components and am trying to set a background image like so
const HeaderImage= styled.div`
background-image: url('../../assets/image.png');
';
I've also tried without the quotes, like so
const HeaderImage= styled.div`
background-image: url(../../assets/image.png);
';
In both cases, I get the same result
http://localhost:3000/assets/image.png Failed to load resource: the server responded with a status of 404 (Not Found)
I am using Richard Kall's react starter
The file is definitely in the specified location.
Am I loading it incorrectly?
I should mention, I'm very new to this (React, and styled-components)
You should import images in the following manner (assuming that you have webpack configured for importing media assets).
import myImage from '../../assets/image.png';
/* ... */
const HeaderImage = styled.div`
background-image: url(${myImage});
`;
EDIT : this answer was edited after the question title was updated, due to misleading question title.
Using image as background-image CSS property :
import LogoSrc from './assets/logo.png';
/* ... */
const LogoDiv = styled.div`
background-image: url(${LogoSrc});
/* width and height should be set otherwise container will have either have them as 0 or grow depending on its contents */
`;
/* ... */
<LogoDiv />
Normal way of importing and using images :
import LogoSrc from './assets/logo.png';
/* ... */
const Logo = styled.img`
width: 30px;
height: 30px;
margin: 15px;
`;
/* ... inside the render or return of your component ... */
<Logo src={LogoSrc} />
EDIT 2: For reference there is another way to use styled-components, mostly used when using components that you already import (i.e. ant-design components of from other component library) or in case of components that don't work using styled._cp_name_ notation.
NOTE: components need to be compatible with styled-components.
Imagine you would export Logo on a file and import it on another component file :
const Logo = styled.img`
width: 30px;
height: 30px;
margin: 15px;
`;
export default Logo;
Then, on the file where you would import it, you could add more styles by :
import Logo from '../components/Logo';
const L = styled(Logo)`
border: 1px dashed black;
`;
/* ... then inside render or return ... */
<L />
import logo from 'public/images/logo.jpg';
/* ... */
const HeaderImg = styled.img.attrs({
src: `${logo}`
})`
width: 50px;
height: 30px;
`;
Importing files is one way of doing it as is suggested above, but it isn't the only way.
Here is an alternative solution, referencing file paths, the original way, using a custom express extension to target your dist folder. (Personally I prefer this approach because it keeps the css clean from the jsx and is self readable)
Disclaimer:
This solution is for webpack-dev-server for testing, but once the code is deployed, as long as you have generated your assets with your dist folder it will work by default.
Example:
component.tsx
const Button = styled.button`
background: url('/assets/file.svg');
`
webpack.config.js
const dist = path.resolve(__dirname, 'dist');
{
devServer: {
contentBase: dist,
historyApiFallback: true,
before: app => {
app.use('/assets', express.static(path.resolve(dist, '/assets')));
}
}
}
You can pass props to a component like this:
export const ImgTop = styled.div`
display: block;
background-image: ${props => `url(${props.background})`};
background-size: cover;
`
<ImgTop background={urlimagen}></ImgTop>
For those seeking a dynamic solution, you can also make something work with the <img> element. Some psuedo code that could make this possible:
// styles.tsx
import styled from "styled-components";
export const Relative = styled.div`
position: relative;
`;
//using the img function is no more supported
export const Image = styled.img`
z-index: 0;
position: absolute;
top: 0;
left: 0;
`;
export const TextInFrontOfImage = styled.p`
z-index: 1;
`;
// index.tsx
//..
<Relative>
<Image src={props.url}></Image>
<TextInFrontOfImage>Lorem Ipsum</TextInFrontOfImage>
</Relative>
Using some combination of position: relative/absolute and z-index you should be able to achieve similar results to the background-image property.