I need to have a background image on my website. I tried using the img tag and this one does work but because I am trying to use Tailwind to have my image styled I would much prefer using the background tag.
This is my current component's code:
import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'
function Home() {
return (
<div className="">
<Header/>
<div style={{ backgroundImage: `url('${houseImg}')` }} />
<HomePageDescr/>
</div>
);
}
export default Home;
Everything renders but the actual background. I tried looking at various things here but no questions/answers helped. Not adding require to the image, nothing.
Anyone encountered the same problem?
Thanks
You need to resize the div. Try setting height and width for the div
Related
Please help me, i don't have web dev experience, and i work in my friend project. I follow a tutorial from youtube about tailwind and react. In the video, he can fill his whole screen using this code:
So i try it in my Dashboard function:
import React from "react";
function Dashboard(props) {
return (
<div>
<main>
<section className=" bg-slate-700 min-h-screen">
hello
</section>
</main>
</div>
);
}
export default Dashboard;
but i get:
This is my project structure looks like:
Why can't i get the same result as the tutorial?
Its because you are using inside a tag which has not to much content in it If you want to apply the color on the full screen you have to use the class "w-screen and min-h-screen" by which that tag gets the full width of the screen and full height
So in my react project I have a bunch of components who's parent components all get called and formatted in the index.js file I am about to paste. The index.js file exports a main function where all previous components are living into the app.js and then the DOM/index.js. Here is my code for the first index.js file:
import {React} from 'react'
import SocialFooter from '../components/SocialMediaFooter'
import Header from '../components/Header'
import SkillsAccordion from '../accessories/SkillsAccordion'
import WorkAccordion from '../accessories/WorkAccordion'
import styled from 'styled-components'
const MasterAccordionContainer = styled.section`
position: relative;
`;
const Main = (props) =>{
return(
<div>
<div>
<Header />
</div>
<div>
<MasterAccordionContainer>
<SkillsAccordion />
<WorkAccordion style={props.children}/>
</MasterAccordionContainer>
</div>
<div>
<SocialFooter />
</div>
</div>
)}
//add all react components here and export to app.js
export default Main;
Here is my task:
I need to somehow style the WorkAccordion component and the SkillAccordion component so that they sit next to eachother rather than one of top of the either. Here is a screenshot of what I mean.
So I need those two Accordions to be side by side instead of on top of one another. I believe this has something to do with me needing to reference absolute and relative positions in the styling off of one another but, I am not sure how to do that. Thank you all in advance for any help you can give me!
Edit:
when adding display:flex; the Accordion gets distorted, see picture above
Edit:
After adding the styling for flexbox directly to the container MasterAccordioinContainer it all worked perfectly!
Picture below:
if you set display: flex; to your parent, its children will be side by side by default, unless you set flex-direction: column (default is row). you could also add the the style flex-wrap: wrap to become responsive for smaller devices. a good guide on flexbox you can find it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am using prime-react to style my React page. But I want a more compact website with very few padding and minimum styling. For this purpose, I want to override a few CSS properties for the prime-react components.
For eg, I am trying to reduce the padding for the MenuBar -
HomePage.js
import {React, Component } from 'react';
import { Menubar } from 'primereact/menubar';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import styled from "styled-components";
export default class HomeMenuBar extends Component {
// menu code ...
render() {
return (
<div>
<div className="card">
<Menubar model={this.items} className={this.props.className} />
</div>
</div>
);
}
}
const ComponentView = styled(HomeMenuBar)`
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.1rem 1rem !important;
}
`;
The above code makes no difference to the original styling.
I am trying to make use of this component.
However, particularly using these styled-components I don't like it. I am new to react and would like to know if there are better alternatives like, storing the CSS properties in another file and then importing it in the required file. I tried this part but it also didn't work out.
I work with react over a year and have seen lot of different ways to customise components and so far, I think that styled-components is the most convenient way to customize components if you cook them right.
I love to put all customized components with styled to a separate file near the index.js called styled.js of Component.js and Componnet.styled.js (in the separate folder of course MyComponent/index.js);
In styled.js you export all components like this:
export const Container = styled.div`
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.1rem 1rem !important;
}
`
In index.js file you inport them like this:
import {Container} from './styled'
// or import * as Styled from './styled' (if you have a lot of customized components);
export default class HomeMenuBar extends Component {
// menu code ...
render() {
return (
<Container>
<div className="card">
<Menubar model={this.items} className={this.props.className} />
</div>
</Container>
);
}
}
If you want to try something more like classic css try to look at css-modules.
This article can help https://www.triplet.fi/blog/practical-guide-to-react-and-css-modules/
You can also try patch-styles, a more declarative way to apply CSS/SCSS modules to your code. Also, check out the StackBlitz example.
I'm having a problem with importing SVG files in React JS.
import { ReactComponent as Logo} from '../logo.svg'
i don't know why but in some components <Logo /> will render correctly
while in other components it doesn't show, the SVG is there when i use inspect and it does take the space it needs but the SVG is blank / empty.
anyone else encountered this issue?
Try:
import { default as logo } from '../logo.svg';
and use as source in a node of type img, like this:
<img src={logo} />
I had the same exact issue and wrapping the logo component in an svg tag or div made it render on to the screen for me. I can also change the SVG color by setting it from the logo as well.
import { ReactComponent as Logo} from '../logo.svg'
<svg><Logo fill="blue" width="100%" height="100%" /></svg>
// or...
<div><Logo fill="blue" width="100%" height="100%" /></div>
Without the <svg> or <div> tag wrapped around it, it was rendering a blank image, taking up the space and all but no visuals. Once I added the wrapper tag around it, it worked. I like this approach since you can dynamically change the SVG styling based on user input.
I had same problem, for some it was how i imported them so I resolved this by using:
import {ReactComponent as Icon} from 'pathtoyourfile.svg
then use as:
<Icon />
Other times however, and I have fallen foul to this a few times, SVG's often have similar class and id names, so if you check the file you might see clip0, image0, pattern0 etc. If you have multiple svg's good chance the ID's and Class names are clashing and are overriding each other. For me the easiest solution was to change the naming convention manually, not sure if a more automated solution exists?
You could do it like so
import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
I checked, only create-react-app could use SVG as a component
https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
Note: this feature is available with react-scripts#2.0.0 and higher,
and react#16.3.0 and higher.
I am using React version 16.8.6. I am trying to load some SVG images in my application, But there is a 1-second delay before the image appears in dom.
Here is how I load svg image
import menuIcon from 'public/images/menu_icon.svg';
<img src={menuIcon} />
Please find the gif link that shows the loading delay issue.
https://ibb.co/jH35S38
PS. This happens in production only.
I had the same problem, i found the article below which says that you can use SVGs as component and because the image is not loaded as a separate file there is no delay.
It works for me.
https://blog.logrocket.com/how-to-use-svgs-in-react/
import React from 'react';
import {ReactComponent as ReactLogo} from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;