I am new to react styled-components. I want to reset the default margin for all elements. I did it using createGlobalStyle as
import { createGlobalStyle } from 'styled-components';
import normalize from 'normalize.css';
export default createGlobalStyle`
${normalize}
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
`
and updated my index.js to be
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import GlobalStyles from './[path]/GlobalStyles';
ReactDOM.render(
<>
<GlobalStyles />
<App />
</>,
document.getElementById('root')
);
However, when I use an h1 element, I noticed that it has default margins, and it's gone only when I specify the h1 element with zero margin in my global styles.
Why? and how can I reset the margin for ALL elements using * selector?
Related
My react file isn't picking up my external styles.css
index.js :
import React from "react";
import ReactDOM from "react-dom";
import "./css/styles.css";
ReactDOM.render(
<div>
<h1 className="upper-deck"> Hello world </h1>
</div>,
document.getElementById("root")
);
styles.css:
.App {
font-family: sans-serif;
text-align: center;
}
.upper-deck {
font-size: "90px";
}
Project folder format :
Don't use quotes for scaler values in CSS. Remove the quotes around the pixel value for the font size.
.upper-deck {
font-size: 90px;
}
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;
I use Create React App with embedded CSS-modules, and installed Bootstrap library. There is an example code:
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);
App.jsx
import React from 'react';
import styles from './style.module.css';
const App = () => (
<nav className={`navbar fixed-top ${styles.navbar}`}>test</nav>
);
export default App;
style.module.css
.navbar {
background: #fff;
height: 100px;
padding: 1.5rem 0;
box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
}
But as a result the styles from Bootstrap erase my styles:
wrong styles
How can I change this behavior?
This is happening due to the order at which React adds the styles to your page.
App is a child component in your index.js page, so it's styles will be applied first. Then as React moves up to the parent level of index.js, it will then apply the bootstrap styles to the page. Since both the bootstrap styles and your styles are of equal specificity, the bootstrap styles will take priority.
The easiest solution would be to increase the specificity of your custom classes that conflict styles with Bootstrap styles.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You may also be able to import the Bootstrap styles in your App component before importing your CSS modules.
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.