I've applied the styling on to CardMedia but the image still doesn't show
<CardMedia
style = {{ height: 0, paddingTop: '56.25%'}}
image={thread.url}
title={thread.title}
/>
thread.url is just a link to the image, so I believe it should be working
Am I doing it correctly or is there a different way to show the image?
If you use create-reac-app it means you probably also use Webpack. Webpack requires you to specify all dpendencies using:
import imageUrl from './image.jpg'
And then you can use it as following:
image={imageUrl}
You can find more information about using Webpack with Create React App
here
I had the same error, I added style and set height for image and CardMedia started working. Additionally I put my images in public folder but it is working also with external links.
<CardMedia
style={{ height: "250px", paddingTop: "2%" }}
component="img"
image={"/pancakes.jpg"}
title="Picture"
alt="pic"
/>
Related
I'm trying to create a landing page in MUI v5 where half of the page is an image and the second part of the page is a form to login. I want the image and form to always fill the page completely with no scroll.
However, when doing so, it seems that MUI root is always affecting the margin so that the view has a horizontal scroll and there is white space on the left-hand side (See example below - and ignore the silly image):
How the page should look (and what it looks like if I scroll to the right):
How the page should look when I load it before scrolling:
I've spent hours trying to edit the CSS and figuring out where this is coming from with no luck. There is probably a better way to format this but I am using Grid and have tried Box with no luck.
My source code looks something like:
import React from "react";
import PropTypes from "prop-types";
import Grid from "#mui/material/Grid/Grid";
import Box from "#mui/material/Box";
import Paper from "#mui/material/Paper";
import SomeComponent from "...{some_path}...";
import SomeFormComponent from "...{some_path}...";
const SomeComponent = ({children, title, width}) => {
return (
<Grid container disableGutters sx={{height: "100vh", width: "100vw"}}>
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: `url(${SomeImage})`,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<SomeFormComponent width={width} title={title}>
{children}
</SomeFormComponent>
</Box>
</Grid>
</Grid>
);
};
Also, inspecting the page elements, I've identified the padding and margin come from a class called css-ayh9c9-MuiGrid-root which seems to be causing this because if I remove the class from the parent, everything works as expected. However, this is being added by MUI behind the scenes because it is nowhere in my source code.
Any help would be greatly appreciated!
I prefer Box whenever possible because Grid does some funky stuff with margins. In this case you can use the flex attribute on the children to get the right proportions. here is a working example https://codesandbox.io/s/material-demo-forked-rur3t?file=/App.tsx
Following the instructions in the gatsby-background-image documentation, I'm able to add a full width background image to a component by including the following in my component
<BackgroundImage fluid={backgroundImage.node.childImageSharp.fluid}>
{children}
</BackgroundImage>
This results in the following "stretched" background:
However, I do not want my image to be the full width of the component. Instead, I would like my background image to repeat within my component to achieve the following:
I see that styling of the background image is supported, but I'm not sure how correctly style the background image to make it repeat. Any help would be much appreciated!
Just add the style object as shown in the Styling & Passed Through Styles section.
<BackgroundImage fluid={backgroundImage.node.childImageSharp.fluid}
style={{ backgroundRepeat: 'repeat', backgroundSize: '200' }}>
{children}
</BackgroundImage>
I want to make hover in Picture Component
I can't find it no matter how hard I try.
Please tell me the name of the css that uses the following guest house used by React.
<Picture style={{marginLeft: "0px", marginRight: "0px", }} />
you could use radium for doing this inline
or just use normal css or a library like styled-components and move away from inline styles
I'm building a login Component in React, and trying to add the brand image. When I do this, I'm getting a huge amount of white space underneath it.
I've been working on this for a bit now, and I've discovered that, when I look in the dev tools, I can make headway by modifying this mysterious div that seems to be created by Material-UI, the front-end framework I'm using.
When I look into this in the dev tools, I find that there's a div with the attribute padding-top: calc(100%) which, when modified to something like padding-top: calc(30%), reduces the size of this whitespace underneath the image.
I've also tried some of the basic layout solutions suggested in many of the answers to similar questions here on SO, but none of them make a difference. It seems that this padding issue is at the heart of the problem.
The Problem
Because I don't know what's creating this div, I'm not able to override the padding to work towards a solution. I've tried modifying paddingTop and padding with the !important tag in the styling of both the image, and the parent element of the image.
Code Sample
<Paper variant='outlined' style={{ width: '380px' }}>
<Box m={4}>
<Image
src='../static/images/TextLogo.svg'
imageStyle={{
height: 'auto',
width: '100%',
}}
/>
</Box>
...
Stack
"#material-ui/core": "^4.0.0-alpha.8",
"material-ui-image": "^3.2.3",
"next": "^8.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
Thanks. I'd appreciate your help!
The <div> with the padding-top and other styles is coming from the Image component that you are using from material-ui-image.
Below is the overall structure rendered by that Image component:
<div
style={styles.root}
onClick={onClick}
>
{image.src && <img
{...image}
style={styles.image}
onLoad={this.handleLoadImage}
onError={this.handleImageError}
/>}
<div style={styles.iconContainer}>
{!disableSpinner && !this.state.imageLoaded && !this.state.imageError && loading}
{!disableError && this.state.imageError && errorIcon}
</div>
</div>
padding-top is part of the styles in styles.root.
styles.root:
const styles = {
root: {
backgroundColor: color,
paddingTop: `calc(1 / ${aspectRatio} * 100%)`,
position: 'relative',
...style
},
When padding-top is a percentage, it is a percentage of the width, so it is important to control the width of the container in order to have predictable behavior.
You can modify the padding-top by either explicitly overriding it via the style prop or by specifying the appropriate value in the aspectRatio prop. By default, this Image component is assuming square images (aspectRatio: 1).
Here is a working example demonstrating both ways of controlling padding-top:
import React from "react";
import Image from "material-ui-image";
import Box from "#material-ui/core/Box";
export default function App() {
return (
<>
<Box m={4} width={200}>
<Image
aspectRatio={1.5}
src="https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg"
/>
Something under image 1
</Box>
<Box m={4} width={200}>
<Image
style={{
paddingTop: "calc(66.7%)"
}}
src="https://www.publicdomainpictures.net/pictures/10000/velka/black-monkey-11280155875i3QV.jpg"
/>
Something under image 2
</Box>
</>
);
}
Slightly related answer (with regard to the use of padding-top): A good way to handle #material-ui Skeleton scaling within a variable height grid row?
I am trying to change the font color of a Semantic pre-made component. I am using this component in React.
I tried adding a id and class tag to the tag, but it did not work. I also tried targeting the entire body in my css file.
<Container text id="text1">
<Header
as='h1'
content='Gardenia'
inverted
style={{
fontSize: mobile ? '2em' : '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: mobile ? '1.5em' : '1.5em',
}}
/>
#text1{
color: black;
}
You can see how to use preset colors for headers in the Semantic UI docs, if you want to define custom colors, Semantic UI has its own protocol for that which are utilized with custom class names.