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;
}
Related
I used the webpack create-react-app with npx. I have a component I saved in the src directory, header.css, and Header.js. It seems that the css file is not working as intended, it is not styling my component. I have the following component structure.
header.css:
.header {
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: center;
align-items: baseline;
padding: 1em;
margin-bottom: 2em;
background-color: rgb(192,45,26);
color: #fff;
}
Header.js:
import React from 'react';
import './header.css';
function Header()
{
return (
<div>
<h1>VACCINE</h1>
</div>
);
}
export default Header;
Any help would be appreciated, I followed the following thread but it didn't seem to work:
CSS modules not working for react version 16.6.0
You've successfully imported the css file, which is step 1. Step 2 is actually using the styles found within. Just apply a class to your div header:
import React from 'react';
import './header.css';
function Header()
{
return (
<div className="header">
<h1>VACCINE</h1>
</div>
);
}
export default Header;
I have a ClassName="logo" that I would like to use to style the logo in the component file. Having no joy thus far. Am I missing something here?
Index file, location the footer will display:
import React from "react"
import Header from "../components/header"
import Hero from "../components/hero"
import Footer from "../components/footer"
export default () => (
<>
<Footer></Footer>
</>
)
Footer css file:
#import "../styles/global.scss";
.footer {
background-color: $black;
color: $white;
height: 230px;
text-align: center;
.logo {
height: 20px;
}
}
Footer.js file:
import React from "react"
import footerStyles from "./footer.module.scss"
export default ({ children }) => (
<>
<div className={footerStyles.footer}>
<img className="logo" src="/svgs/logo_white.svg" alt="logo text"></img>
</div>{children}</div>
</>
)
I'm trying to make my first React Project for a school task.
I started to with npm install -g create-react-app then create-react-app my-app.
I added some html to the app and that works great in the browser. Now I have created a button.js file and a button.css file.
I can't see any changes that I do in the button.css file.
Is it something wrong on the code or do I need to add something more to get the css work?
src/App.js
import React, { Component } from "react";
import './App.css';
import Button from './components/Button';
class App extends Component {
render() {
return (
<div className="App">
<div className="calc-wrapper">
<div className="row">
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>/</Button>
</div>
</div>
);
}
}
export default App;
src/compontents/Button.js
import React, { Component } from "react";
import './Button.css';
class Button extends Component {
render() {
return (
<div className="button">
{this.props.children}
</div>
);
}
}
export default Button;
src/componentes/Button.css
.button {
display: flex;
height: 4em;
flex: 1;
justify-content: center;
align-items: center;
font-weight: lighter;
font-size: 1.4em;
background-color: #e0e1e6;
color:#888;
outline: 1px solid #888;
}
Since you used the lowercased button, it is interpreted as the normal <button> element instead of your <Button> component.
Your App.js should look like this.
import React, { Component } from "react";
import "./App.css";
import Button from "./components/Button";
class App extends Component {
render() {
return (
<div className="App">
<div className="calc-wrapper">
<div className="row">
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>/</Button>
</div>
</div>
</div>
);
}
}
export default App;
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.
I'm working on a create-react-app project, which I hooked SASS to, using these instructions: https://github.com/facebook/create-react-app
Then, in my source, I created a style folder with a partials folder and an index.scss. Inside the partials folder, I have a firstComponent.scss file. I imported the scss from the firstComponent file into my index.scss. The styles are being successfully imported into my index.css file. However, they are not being rendered on the browser. Why is this?
here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './style/index.scss';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
here is my index.scss
#import './partials/_firstComponent';
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
here is my firstComponent.scss
.firstComponent {
background-color: 'red';
}
here is my index.css
.firstComponent {
background-color: 'red'; }
body {
margin: 0;
padding: 0;
font-family: sans-serif; }
You will need this line instead
require('./style/index.scss');
NOT
import './style/index.scss';