I am new to react and trying to make a simple component and set its background image using separate css file.
My App.js component:
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<div className="header-img">
{/* <img src={require('./header.jpg')} alt='header-img'/> */}
</div>
</div>
);
}
The CSS file:
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.header-img{
width: 100%;
height: 426px;
margin-top: 50px;
background-image: url('./header.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
/* background-color: aquamarine; */
}
Here is CodeSandBox link https://codesandbox.io/s/clever-silence-cvhyt?file=/src/styles.css:0-309
Using files through pure CSS will work only on static files, so you need to put your images in the public folder.
That's because React applications that bootstrapped with create-react-app are using webpack for bundling the src folder, accessing a path like './header.jpg' through CSS won't bundle the file.
// public/header1.jpg
.header-img {
background-image: url("./header1.jpg");
}
Related
I have a simple lightbox component that uses a material-ui modal and has a style sheet. The component and the css look like this.
Lightbox.tsx
import { Modal } from '#material-ui/core';
import { CloseOutlined } from '#material-ui/icons';
import styles from './Lightbox.module.css';
export default function Lightbox(props: any) {
return (
<Modal
className={styles.modal}
open={props.open}
onClose={props.handleClose}
>
<div className={styles.imageContainer}>
<div className={styles.imageToolbar}>
<CloseOutlined
aria-aria-label={props.closeButtonMessage}
className={styles.toolbarButton}
data-cy="lightbox-close"
fontSize="inherit"
onClick={props.handleClose}
role="button"
/>
</div>
<img src={props.url} className={styles.image} title={props.name} />
</div>
</Modal>
);
}
Lightbox.module.css
.modal {
z-index: 2147483640 !important;
}
.imageContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.image {
max-width: 90%;
max-height: 90%;
}
.imageToolbar {
right: 10px;
top: 10px;
position: absolute;
width: 100%;
font-size: 40px;
}
.toolbarButton {
color: #cccc;
cursor: pointer;
float: right;
}
.toolbarButton:hover {
color: #ffff;
}
The component is rendered inside another component like so:
<Lightbox
closeButtonMessage={formatMessage(closeMessageDescriptor)}
url={url}
name={name}
handleOpen={handleOpen}
handleClose={handleClose}
open={open}
/>
When the application is run, the class names are present on the elements however, the styles are missing.
Elements in debugger console: Rendered elements
Rendered CSS for the elements: Style not rendering for the class
What am I doing wrong?
Please note that I need to use CSS style sheet as mentioned in my example and not inline CSS styles.
Since I am new to react, I have tried looking at other components in the project I am currently working on. This method of using CSS style works for other components. Since I am new to React, any help is appreciated.
Can you please help me with why this is not working. I have tried every possible way and still not get why it is not showing on the screen. Only the commented out inside the div work however what i want is a backgroundImage.
import React from "react";
import styles from "./Carosel.module.css";
import legend from "../carousel-photos/legend.jpg";
import legend1 from "../carousel-photos/legend2.jpeg";
function Carousel() {
return (
<div className={styles.carousel}>
<div
className={styles.carouselInner}
styles={{
backgroundImage: `url(${legend})`,
}}
>
{/* <img src={images[0].img} /> */}
</div>
</div>
);
}
export default Carousel;
.carousel {
width: 60%;
height: 700px;
/* background-color: black; */
}
.carouselInner {
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
}
This is how I put my folder directory looks like
I am using mdi-react package and combining it with scss to define some styles but the font-size propert is not working.
Everything else (like color property) is working.
I searched it all over the internet but can't find a solution so finally decided to write my first question on stackoverflow.
And I know I can just use size="8rem" in the icon component itself but I don't want to do that because of some reasons.
Here is my Home.js file:
import React from 'react';
import { Helmet } from 'react-helmet';
import CubeOutlineIcon from 'mdi-react/CubeOutlineIcon';
import { Link } from 'react-router-dom';
const home = () => (
<>
<Helmet><title>Quiz App - Home</title></Helmet>
<div id="home">
<section>
<div>
<CubeOutlineIcon className="cube" />
</div>
<h1>Quiz App</h1>
<div className="play-button-container">
<ul>
<li><Link to="/play/instructions">Play</Link></li>
</ul>
</div>
<div className="auth-container">
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
</div>
</section>
</div>
</>
);
export default home;
Here is my home.scss file:
#home {
background-image: url('../../assets/img/bg1.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: space-around;
height: 100vh;
section {
background-color: rgba($color: #000000, $alpha: 0.7);
padding: $normal $md;
height: 80%;
width: 35%;
}
.cube {
font-size: 8rem; //Not working
color: $orange;
}
}
That's because the .cube is actually assigned to an SVG element and that would require you to use height and width to change it's size. Font ain't gonna work hence.
(I'm assuming that you considered it to be a font-icon or so as the color property got applied to it, but it did so cos fill is set as currentColor, which uses the current text-color.)
According to docs, to change the size of the icon you should use the size property.
Check the following link:
https://github.com/levrik/mdi-react#usage
For some reason, my React Component is not reading my CSS file. This is the code in my React component.
import React, { Component } from 'react';
import './Jumbotron.css';
class Jumbotron extends Component {
render() {
return (
<div className="Jumbotron jumbotron-fluid">
<div className="container">
<h1 className="display-3">{this.props.title}</h1>
<p className="lead">{this.props.subtitle}</p>
<p className="lead">{this.props.name}</p>
</div>
</div>
)
}
}
export default Jumbotron;
Below is my file structure
The .css file has the following code.
.jumbotron {
background-image: url(../images/fog-forest-lake-113727.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
color: white;
}
Short answer - The classname is lowercase in your css, it should be capital. Longer answer below which might be helpful to you.
I would recommend using `styled components'. Link is here.
For example your component could look like below
import React, { Component } from 'react';
import StyledWrapper from './styles/wrapper';
class Jumbotron extends Component {
render() {
return (
<StyledWrapper>
<div className="container">
<h1 className="display-3">{this.props.title}</h1>
<p className="lead">{this.props.subtitle}</p>
<p className="lead">{this.props.name}</p>
</div>
</StyledWrapper>
)
}
}
export default Jumbotron;
And in my wrapper.js file I would have the following
import styled from 'styled-components';
export default styled.div`
background-image: url(../images/fog-forest-lake-113727.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: 100% auto;
color: white;
`;
so i'm in the process of learning react and to do so i'm trying to convert my personal webpage to use it.. But i've hit a wall. Before I had a background image on my home page that took up 100% width and 80% height. But when I try to do that in react it's not showing my image. Here is my code.
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
margin: 0;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url('../images/haha.jpg');
min-height: 80%;
}
#homeTest {
white-space:nowrap;
}
and on the react side i'm just doing:
import React from 'react';
import ReactDOM from 'react-dom';
import './css/w3.css';
import './css/landing.css'
class Landing extends React.Component {
render() {
return (
<div className="bgimg-1" id="home">
<div id="homeText">
<h1>David Dennis <small>Im here to create meaningful and lasting software</small>
<a href="https://www.youtube.com/channel/UCun833t1bRiYlpoRAkg0S1g?view_as=subscriber">
<button class="btn draw-border" >Subscribe on YouTube</button></a></h1>
</div>
</div>
);
}
}