I am currently working on a simple react image that will have profile pictures of different user. I have run into an issue when I try to set the background image. I will have two background images but I am unable to place any.
The images are in my public/images/ but nothing is showing up in the webpage.
I am adding the image in body{} in the CSS file "App.css".
App.css
body {
margin: 0;
font-family: var(--fontFamily);
font-size: var(--fontSize);
background-image: "url(/images/bg-pattern-top.svg)";
background-size: contain;
background-position: top;
}
App.js
import './App.css';
import PorfileCard from './PorfileCard';
function App() {
return (
<div>
<PorfileCard/>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
The only way I was able to resolve this was via using inline styling on the main div in app.js.
import './App.css';
import PorfileCard from './PorfileCard';
function App() {
const mystyle = {
backgroundImage: "url(/images/bg-pattern-top.svg)",
backgroundSize: "cover",
backgroundRepeat: "no-repeat"
}
return (
<div style={ mystyle }>
<PorfileCard/>
</div>
);
}
export default App;
Related
I am trying to use #emotion/styled. But, I cannot get the components to render on the screen, whereas if I am using the HTML element it is working fine.
import styled from "#emotion/styled";
export const Button = styled.button`
color: red;
background-color: green;
`;
import { Button } from "../styles/Button";
const Test = () => {
return (
<div>
<Button>Hello</Button>
</div>
);
};
export default Test;
Does anyone has any idea where things are going wrong?
It is working in my sandbox here
sandbox
import "./styles.css";
import styled from "#emotion/styled";
const Button = styled.button`
color: red;
background-color: green;
`;
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Button>Hello</Button>
</div>
);
}
try to import this on top of your component where you use emotion css.
This fixed my problems with not loading emotion css. Cheers!
/** #jsxImportSource #emotion/react */
You can use styled with css function to make a new component by updating some styles of existing component.
import styled from "#emotion/styled";
import { css } from "#emotion/react";
import { Button as MUIButton } from "#mui/material";
export const Button = styled(MUIButton)(
css({
backgroundColor: "green",
color: "red",
})
);
I have added the following classes to elements as follows:
import Link from "next/link";
import React from "react";
const Page = () => {
return (
<div>
<h1 className="notes-header">Index Page</h1>
<Link href="./notes">
<a className="notes-home">Notes</a>
</Link>
</div>
);
};
export default Page;
Next, I added styling to my element as follows
.notes-header {
font-size: 100px;
}
.notes-home {
font-size: 28px;
}
Lastly, I created a _app.js file and imported the global css file as shown below:
import React from "react";
import "../styles/globals.css";
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
The problem is my styles don't get applied to my selected elements. What I'm I getting wrong?
I am wishing to add a gradient to a landing page image.
I see examples in CSS using background (Example) but I am curious if it is possible to add it inline.
I appreciate any critiques, thank you!
import React from 'react';
import city from '../images/city-buildings.jpg'
function Home() {
return (
<div className='home'>
<img
src={city}
alt="city buildings looking up"
width="100%"
height="100%"
backgroundImage="linear-gradient(to right, #4880EC, #019CAD)". <------------- this line
/>
</div>
);
}
export default Home;
To apply a linear gradient over an image this code worked for me:
Component
import React, { Component } from 'react';
import city from '../images/city-buildings.jpg'
const style = {
width: '100%',
height: '100%',
opacity: '0.8'
}
export default class MyComponent extends Component {
render() {
return (
<div className="home">
<img
src={city}
style={style}
alt="city buildings looking up"
/>
</div>
)
}
}
Component.css
.home {
background: linear-gradient(#e66465, #9198e5);
}
For example I want to add flex my h1 with class pageTitle
import AppBar from '#material-ui/core/AppBar';
const styles = require('./Header.module.css');
<div className={styles.header}>
<AppBar>
<Typography>
<h1 className={styles.pageTitle}>HELLO</h1>
</Typography>
</AppBar>
</div>
In my Header.module.css file
.pageTitle {
display: flex;
border-top: 10px;
}
Is this possible to do? Because its not changing anything on my end, again using Typescript, but following the same process as the docs that Material UI shows for css modules
Probably material-ui selectors are "stronger".
Material-ui supply several ways to override their styles.
For example, use classes. In your case:
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from '#material-ui/core/styles';
import AppBar from "#material-ui/core/AppBar";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles({
root: {
display: 'flex',
borderTop: '10px solid orange'
}
});
function App() {
const classes = useStyles();
return (
<AppBar classes={classes}>
<Typography>
<h1>HELLO</h1>
</Typography>
</AppBar>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
https://codesandbox.io/s/material-ui-override-styles-classes-v8nhl
BTW, <AppBar /> already has display: flex and you set borderTop in a css file which is invalid (it should be border-top) so maybe if it was valid, it was working.
I have a simple React App, using Redux's Provider to wrap my App component.
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
import registerServiceWorker from './registerServiceWorker';
const MainContainer = styled.div`
margin: 0;
padding: 0;
height: 100vh;
background-color: red;
`;
ReactDOM.render(
<MainContainer>
<Provider store={store}>
<App />
</Provider>
</MainContainer>,
document.getElementById('root'),
);
registerServiceWorker();
However, when this app renders, there's a white gap around the edge (all sides) of the screen. What's the correct way to override the body tag so that the App content goes to the edge of the screen?
That's the default styling of your browser. You could use something like Normalize.css, or simply remove the margin and padding of the body yourself.
body {
margin: 0;
padding: 0;
}
You can do this with injectGlobal.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
Thanks for the answers, but I was looking for a Styled Components specific answer.
Turns out that Styled Components has a helper method, injectGlobal, which can override the global body tag.
Using this, one can set the desired properties – in this case, no margin / padding. So, adding the following to index.js solves the issue.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
For styled components v4 and onwards use createGlobalStyle instead:
import { createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
body {
color: red;
}
`
// later in your app's render method
<React.Fragment>
<Navigation />
<OtherImportantTopLevelComponentStuff />
<GlobalStyle />
</React.Fragment>
Styled Components FAQs
In your "App.css" write this :
body {
overflow-y: hidden;
}
That's working for my home page.